import { useMutation, useQuery, useQueryClient } from "react-query";
import { fetchGuildChannels, postGuildTodo } from "../../api";
import { useGuild } from "../App/useGuild";
import { useState } from "preact/hooks";
import { useFlash } from "../App/FlashContext";
import { ICON_FLASH_TIME } from "../../consts";

export const CreateTodo = () => {
    const guild = useGuild();

    const [recentlyCreated, setRecentlyCreated] = useState(false);
    const [newTodo, setNewTodo] = useState({ value: "", channel_id: null });

    const flash = useFlash();

    const queryClient = useQueryClient();
    const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
    const mutation = useMutation({
        ...postGuildTodo(guild),
        onSuccess: (data) => {
            if (data.error) {
                flash({
                    message: data.error,
                    type: "error",
                });
            } else {
                flash({
                    message: "Todo created",
                    type: "success",
                });
                queryClient.invalidateQueries({
                    queryKey: ["GUILD_TODO"],
                });
                setRecentlyCreated(true);
                setTimeout(() => {
                    setRecentlyCreated(false);
                }, ICON_FLASH_TIME);
            }
        },
    });

    console.log(newTodo);

    return (
        <div class="todo">
            <textarea
                class="input todo-input"
                onInput={(ev) => setNewTodo((todo) => ({ ...todo, value: ev.currentTarget.value }))}
            />
            <div class="control has-icons-left">
                <div class="select">
                    <select
                        name="channel"
                        class="channel-selector"
                        onInput={(ev) =>
                            setNewTodo((todo) => ({
                                ...todo,
                                channel_id: ev.currentTarget.value || null,
                            }))
                        }
                    >
                        <option value="">(None)</option>
                        {isSuccess && channels.map((c) => <option value={c.id}>{c.name}</option>)}
                    </select>
                </div>
                <div class="icon is-small is-left">
                    <i class="fas fa-hashtag"></i>
                </div>
            </div>
            <button onClick={() => mutation.mutate(newTodo)} class="button is-success save-btn">
                <span class="icon">
                    {mutation.isLoading ? (
                        <span class="icon">
                            <i class="fas fa-spin fa-cog"></i>
                        </span>
                    ) : recentlyCreated ? (
                        <span class="icon">
                            <i class="fas fa-check"></i>
                        </span>
                    ) : (
                        <span class="icon">
                            <i class="fas fa-sparkles"></i>
                        </span>
                    )}
                </span>
            </button>
        </div>
    );
};