import { DateTime } from "luxon";
import { useQuery } from "react-query";
import { QueryKeys } from "../../consts";
import { fetchUserInfo } from "../../api";

type DisplayProps = {
    timezone: string;
};

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

    const hour = now.hour;
    const minute = now.minute;

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

const TimezonePicker = () => {
    const browserTimezone = DateTime.now().zone.name;

    const { isLoading, isError, data } = useQuery({
        queryKey: QueryKeys.USER_DATA,
        queryFn: fetchUserInfo,
    });

    return (
        <div class="modal" id="chooseTimezoneModal">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <label class="modal-card-title" for="urlInput">
                        Update Timezone{" "}
                        <a href="/help/timezone">
                            <span>
                                <i class="fa fa-question-circle"></i>
                            </span>
                        </a>
                    </label>
                    <button class="delete close-modal" aria-label="close"></button>
                </header>
                <section class="modal-card-body">
                    <p>
                        Your configured timezone is:{" "}
                        <TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
                        <br></br>
                        <br></br>
                        Your browser timezone is:{" "}
                        <TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
                        <br></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 close-modal" id="set-browser-timezone">
                            <span>Use Browser Timezone</span>{" "}
                            <span class="icon">
                                <i class="fab fa-firefox-browser"></i>
                            </span>
                        </button>
                        <button class="button is-link close-modal" id="set-bot-timezone">
                            <span>Use Bot Timezone</span>{" "}
                            <span class="icon">
                                <i class="fab fa-discord"></i>
                            </span>
                        </button>
                        <button class="button is-warning close-modal" id="update-bot-timezone">
                            Set Bot Timezone
                        </button>
                    </div>
                </section>
            </div>
            <button class="modal-close is-large close-modal" aria-label="close"></button>
        </div>
    );
};
