import { useRef, useState } from "preact/hooks";
import { useMutation, useQueryClient } from "react-query";
import { patchGuildReminder, patchUserReminder } from "../../../api";
import { ICON_FLASH_TIME } from "../../../consts";
import { DeleteButton } from "./DeleteButton";
import { useReminder } from "../ReminderContext";
import { useFlash } from "../../App/FlashContext";
import { useGuild } from "../../App/useGuild";

export const EditButtonRow = () => {
    const guild = useGuild();
    const [reminder, setReminder] = useReminder();

    const [recentlySaved, setRecentlySaved] = useState(false);
    const iconFlashTimeout = useRef(0);

    const flash = useFlash();
    const mutation = useMutation({
        ...(guild ? patchGuildReminder(guild) : patchUserReminder()),
        onError: (error) => {
            flash({
                message: `An error occurred: ${error}`,
                type: "error",
            });
        },
        onSuccess: (response) => {
            if (iconFlashTimeout.current !== null) {
                clearTimeout(iconFlashTimeout.current);
            }

            if (response.data.error) {
                setRecentlySaved(false);

                flash({ message: response.data.error, type: "error" });
            } else if (response.data.errors && response.data.errors.length > 0) {
                setRecentlySaved(false);

                for (const error of response.data.errors) {
                    flash({ message: error, type: "error" });
                }
            } else {
                setRecentlySaved(true);

                iconFlashTimeout.current = setTimeout(() => {
                    setRecentlySaved(false);
                }, ICON_FLASH_TIME);

                setReminder(response.data.reminder);
            }
        },
    });

    return (
        <div class="button-row-edit">
            <button
                class="button is-success save-btn"
                onClick={() => {
                    mutation.mutate(reminder);
                }}
                disabled={mutation.isLoading}
            >
                <span>Save</span>{" "}
                {mutation.isLoading ? (
                    <span class="icon">
                        <i class="fas fa-spin fa-cog"></i>
                    </span>
                ) : recentlySaved ? (
                    <span class="icon">
                        <i class="fas fa-check"></i>
                    </span>
                ) : (
                    <span class="icon">
                        <i class="fas fa-save"></i>
                    </span>
                )}
            </button>
            <button
                class="button is-warning"
                onClick={() => {
                    mutation.mutate({
                        ...reminder,
                        enabled: !reminder.enabled,
                    });
                }}
                disabled={mutation.isLoading}
            >
                {reminder.enabled ? "Disable" : "Enable"}
            </button>
            <DeleteButton />
        </div>
    );
};
