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";

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

    const [reminder, setReminder] = useReminder();

    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*
                        <input
                            class="input"
                            type="datetime-local"
                            step="1"
                            name="time"
                            value={reminder.utc_time.toLocal().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
                            onInput={(ev) => {
                                setReminder((reminder) => ({
                                    ...reminder,
                                    utc_time: DateTime.fromISO(ev.currentTarget.value).toUTC(),
                                }));
                            }}
                        ></input>
                    </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
                                    <input
                                        class="input"
                                        type="datetime-local"
                                        step="1"
                                        name="expiration"
                                        value={
                                            reminder.expires !== null &&
                                            reminder.expires.toFormat("yyyy-LL-dd'T'HH:mm:ss")
                                        }
                                    ></input>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="columns is-mobile tts-row">
                        <div class="column has-text-centered">
                            <div class="is-boxed">
                                <label class="label">
                                    Enable TTS <input type="checkbox" name="tts"></input>
                                </label>
                            </div>
                        </div>
                        <div class="column has-text-centered">
                            <div class="file is-small is-boxed">
                                <label class="file-label">
                                    <input class="file-input" type="file" name="attachment"></input>
                                    <span class="file-cta">
                                        <span class="file-label">Add Attachment</span>
                                        <span class="file-icon">
                                            <i class="fas fa-upload"></i>
                                        </span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
