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 = ({ showSelector = false, channel }) => {
    const guild = useGuild();

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

    const flash = useFlash();

    const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));

    const queryClient = useQueryClient();
    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_TODOS", guild],
                });
                setRecentlyCreated(true);
                setTimeout(() => {
                    setRecentlyCreated(false);
                }, ICON_FLASH_TIME);
            }
        },
    });

    return (
        <div class="todo">
            <textarea
                class="input todo-input"
                onInput={(ev) => setNewTodo((todo) => ({ ...todo, value: ev.currentTarget.value }))}
            />
            {showSelector && (
                <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>
    );
};