import { Reminder } from "../../api";
import { useState } from "preact/hooks";
import { EditButtonRow } from "./ButtonRow/EditButtonRow";
import { Message } from "./Message";
import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext";
import { TopBar } from "./TopBar";

type Props = {
    reminder: Reminder;
};

export const EditReminder = ({ reminder: initialReminder }: Props) => {
    const [reminder, setReminder] = useState(initialReminder);

    const [collapsed, setCollapsed] = useState(false);

    return (
        <ReminderContext.Provider value={[reminder, setReminder]}>
            <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
                <TopBar
                    toggleCollapsed={() => {
                        setCollapsed(!collapsed);
                    }}
                />
                <div class="columns reminder-settings">
                    <Message />
                    <Settings />
                </div>
                <EditButtonRow />
            </div>
        </ReminderContext.Provider>
    );
};
