import { DateTime } from "luxon";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { fetchUserInfo, patchUserInfo } from "../../api";
import { Modal } from "../Modal";
import { useState } from "preact/hooks";
import { useTimezone } from "../App/TimezoneProvider";

type DisplayProps = {
    timezone: string;
};

const TimezoneDisplay = ({ timezone }: DisplayProps) => {
    const now = DateTime.now().setZone(timezone);

    const hour = now.hour.toString().padStart(2, "0");
    const minute = now.minute.toString().padStart(2, "0");

    return (
        <>
            <strong>
                <span class="set-timezone">{timezone}</span>
            </strong>{" "}
            (
            <span class="set-time">
                {hour}:{minute}
            </span>
            )
        </>
    );
};

export const TimezonePicker = () => {
    const [modalOpen, setModalOpen] = useState(false);

    return (
        <>
            <a
                class="show-modal"
                data-modal="chooseTimezoneModal"
                onClick={() => {
                    setModalOpen(true);
                }}
            >
                <span class="icon">
                    <i class="fas fa-map-marked"></i>
                </span>{" "}
                Timezone
            </a>
            {modalOpen && <TimezoneModal setModalOpen={setModalOpen} />}
        </>
    );
};

const TimezoneModal = ({ setModalOpen }) => {
    const browserTimezone = DateTime.now().zoneName;
    const [selectedZone, setSelectedZone] = useTimezone();

    const queryClient = useQueryClient();
    const { isLoading, isError, data } = useQuery(fetchUserInfo());
    const userInfoMutation = useMutation({
        ...patchUserInfo(),
        onSuccess: () => {
            queryClient.invalidateQueries(["USER_INFO"]);
        },
    });

    return (
        <Modal title={"Timezone"} setModalOpen={setModalOpen}>
            <p>
                Your configured timezone is:{" "}
                <TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
                <br />
                Your browser timezone is:{" "}
                <TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
                <br />
                {!isError && (
                    <>
                        Your bot timezone is:{" "}
                        {isLoading ? (
                            <i className="fas fa-cog fa-spin"></i>
                        ) : (
                            <TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
                        )}
                    </>
                )}
            </p>
            <br></br>
            <div class="has-text-centered">
                <button
                    class="button is-success"
                    style={{
                        margin: "2px",
                    }}
                    id="set-browser-timezone"
                    onClick={() => {
                        setSelectedZone(browserTimezone);
                    }}
                >
                    <span>Use Browser Timezone</span>{" "}
                    <span class="icon">
                        <i class="fab fa-firefox-browser"></i>
                    </span>
                </button>
                <button
                    class="button is-success"
                    id="set-bot-timezone"
                    style={{
                        margin: "2px",
                    }}
                    onClick={() => {
                        setSelectedZone(data.timezone);
                    }}
                >
                    <span>Use Bot Timezone</span>{" "}
                    <span class="icon">
                        <i class="fab fa-discord"></i>
                    </span>
                </button>
                <button
                    class="button is-success is-outlined"
                    id="update-bot-timezone"
                    style={{
                        margin: "2px",
                    }}
                    onClick={() => {
                        userInfoMutation.mutate(browserTimezone);
                    }}
                >
                    Set Bot Timezone
                </button>
            </div>
        </Modal>
    );
};