import { ChannelSelector } from "./ChannelSelector";
import { DateTime } from "luxon";
import { IntervalSelector } from "./IntervalSelector";
import { useQuery } from "react-query";
import { fetchGuildInfo, fetchUserInfo } from "../../api";
import { useReminder } from "./ReminderContext";
import { Attachment } from "./Attachment";
import { TTS } from "./TTS";
import { TimeInput } from "./TimeInput";
import { useGuild } from "../App/useGuild";

export const Settings = () => {
    const guild = useGuild();
    const { isSuccess: userFetched, data: userInfo } = useQuery({ ...fetchUserInfo() });
    const { isSuccess: guildFetched, data: guildInfo } = useQuery({ ...fetchGuildInfo(guild) });

    const [reminder, setReminder] = useReminder();

    if (!userFetched || !guildFetched) {
        return <></>;
    }

    return (
        <div class="column settings">
            {guild && (
                <div class="field channel-field">
                    <div class="collapses">
                        <label class="label" for="channelOption">
                            Channel*
                        </label>
                    </div>
                    <ChannelSelector
                        channel={reminder.channel}
                        setChannel={(channel: string) => {
                            setReminder((reminder) => ({
                                ...reminder,
                                channel: channel,
                            }));
                        }}
                    />
                </div>
            )}

            <div class="field">
                <div class="control">
                    <label class="label collapses">
                        Time*
                        <TimeInput
                            defaultValue={reminder.utc_time}
                            onInput={(time: string) => {
                                setReminder((reminder) => ({
                                    ...reminder,
                                    utc_time: time,
                                }));
                            }}
                        />
                    </label>
                </div>
            </div>

            <div class="collapses split-controls">
                <div>
                    <div
                        class={
                            userInfo.patreon || guildInfo.patreon
                                ? "patreon-only"
                                : "patreon-only is-locked"
                        }
                    >
                        <div class="patreon-invert foreground">
                            Intervals available on <a href="https://patreon.com/jellywx">Patreon</a>{" "}
                            or{" "}
                            <a href="https://gitea.jellypro.xyz/jude/reminder-bot">self-hosting</a>
                        </div>
                        <div class="field">
                            <label class="label">
                                Interval{" "}
                                <a class="foreground" href="/help/intervals">
                                    <i class="fas fa-question-circle"></i>
                                </a>
                            </label>
                            <IntervalSelector
                                months={reminder.interval_months}
                                days={reminder.interval_days}
                                seconds={reminder.interval_seconds}
                                setInterval={({ seconds, days, months }) => {
                                    setReminder((reminder) => ({
                                        ...reminder,
                                        interval_months: months,
                                        interval_days: days,
                                        interval_seconds: seconds,
                                    }));
                                }}
                                clearInterval={() => {
                                    setReminder((reminder) => ({
                                        ...reminder,
                                        interval_months: null,
                                        interval_days: null,
                                        interval_seconds: null,
                                    }));
                                }}
                            ></IntervalSelector>
                        </div>

                        <div class="field">
                            <div class="control">
                                <label class="label">
                                    Expiration
                                    <TimeInput
                                        defaultValue={reminder.expires}
                                        onInput={(time: string) => {
                                            setReminder((reminder) => ({
                                                ...reminder,
                                                expires: time,
                                            }));
                                        }}
                                    />
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="columns is-mobile tts-row">
                        <div class="column has-text-centered">
                            <TTS />
                        </div>
                        <div class="column has-text-centered">
                            <Attachment />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};