import { useState } from "preact/hooks";
import { fetchGuildChannels, Reminder } from "../../api";
import { DateTime } from "luxon";
import { CreateButtonRow } from "./ButtonRow/CreateButtonRow";
import { TopBar } from "./TopBar";
import { Message } from "./Message";
import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext";
import { useQuery } from "react-query";
import "./styles.scss";
import { useGuild } from "../App/useGuild";
import { DEFAULT_COLOR } from "./Embed";
import { useTimezone } from "../App/TimezoneProvider";

function defaultReminder(): Reminder {
    return {
        attachment: null,
        attachment_name: null,
        avatar: null,
        channel: null,
        content: "",
        embed_author: "",
        embed_author_url: null,
        embed_color: DEFAULT_COLOR,
        embed_description: "",
        embed_fields: [],
        embed_footer: "",
        embed_footer_url: null,
        embed_image_url: null,
        embed_thumbnail_url: null,
        embed_title: "",
        enabled: true,
        expires: null,
        interval_days: null,
        interval_months: null,
        interval_seconds: null,
        name: "",
        restartable: false,
        tts: false,
        uid: "",
        username: "",
        utc_time: DateTime.now().setZone("UTC").toFormat("yyyy-LL-dd'T'HH:mm:ss"),
    };
}

export const CreateReminder = () => {
    const guild = useGuild();

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

    const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));

    if (isSuccess && reminder.channel === null) {
        setReminder((reminder) => ({
            ...reminder,
            channel: reminder.channel || guildChannels[0].id,
        }));
    }

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