import { useState } from "preact/hooks";
import { Modal } from "../Modal";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
import { useParams } from "wouter";
import { useReminder } from "./ReminderContext";
import { useFlash } from "../App/FlashContext";
import { ICON_FLASH_TIME } from "../../consts";

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

    return (
        <div>
            <button
                class="button is-outlined show-modal is-pulled-right"
                onClick={() => {
                    setModalOpen(true);
                }}
            >
                Load Template
            </button>
            {modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
        </div>
    );
};

const LoadTemplateModal = ({ setModalOpen }) => {
    const { guild } = useParams();
    const [reminder, setReminder] = useReminder();

    const [selected, setSelected] = useState(null);
    const flash = useFlash();

    const queryClient = useQueryClient();
    const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
    const mutation = useMutation({
        ...deleteGuildTemplate(guild),
        onSuccess: () => {
            flash({ message: "Template deleted", type: "success" });
            queryClient.invalidateQueries({
                queryKey: ["GUILD_TEMPLATES", guild],
            });
        },
    });

    return (
        <Modal setModalOpen={setModalOpen} title={"Load Template"}>
            <div class="control has-icons-left">
                <div class="select is-fullwidth">
                    <select
                        id="templateSelect"
                        onChange={(ev) => {
                            setSelected(ev.currentTarget.value);
                        }}
                        disabled={mutation.isLoading}
                    >
                        <option disabled={true} selected={true}>
                            Choose template...
                        </option>
                        {isSuccess &&
                            templates.map((template) => (
                                <option value={template.id}>{template.name}</option>
                            ))}
                    </select>
                </div>
                <div class="icon is-small is-left">
                    <i class="fas fa-file-spreadsheet"></i>
                </div>
            </div>
            <br></br>
            <div class="has-text-centered">
                <button
                    class="button is-success close-modal"
                    id="load-template"
                    style={{ margin: "2px" }}
                    onClick={() => {
                        const template = templates.find(
                            (template) => template.id.toString() === selected,
                        );

                        setReminder((reminder) => ({
                            ...reminder,
                            ...template,
                            // drop the template's ID
                            id: undefined,
                        }));

                        flash({ message: "Template loaded", type: "success" });
                        setModalOpen(false);
                    }}
                    disabled={mutation.isLoading}
                >
                    Load Template
                </button>
                <button
                    class="button is-danger"
                    id="delete-template"
                    style={{ margin: "2px" }}
                    onClick={() => {
                        const template = templates.find(
                            (template) => template.id.toString() === selected,
                        );

                        mutation.mutate(template);
                    }}
                    disabled={mutation.isLoading}
                >
                    Delete
                </button>
            </div>
        </Modal>
    );
};