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

export const Settings = () => {
    const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());

    const [reminder, setReminder] = useReminder();
    const [timezone] = useTimezone();

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

    return (
        <div class="column settings">
            <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: DateTime) => {
                                setReminder((reminder) => ({
                                    ...reminder,
                                    utc_time: time,
                                }));
                            }}
                        />
                    </label>
                </div>
            </div>

            <div class="collapses split-controls">
                <div>
                    <div class={userInfo.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: DateTime) => {
                                            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>
    );
};