import { useQuery, useQueryClient } from "react-query";
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder";
import { useCallback, useState } from "preact/hooks";
import { Loader } from "../Loader";
import { useGuild } from "../App/useGuild";

enum Sort {
    Time = "time",
    Name = "name",
    Channel = "channel",
}

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

    const {
        isSuccess,
        isFetching,
        isFetched,
        data: guildReminders,
    } = useQuery(fetchGuildReminders(guild));
    const { data: channels } = useQuery(fetchGuildChannels(guild));

    const [collapsed, setCollapsed] = useState(false);
    const [sort, _setSort] = useState(Sort.Time);
    const queryClient = useQueryClient();

    let prevReminder = null;

    const setSort = useCallback((sort) => {
        queryClient.invalidateQueries(["GUILD_REMINDERS"]);
        _setSort(sort);
    }, []);

    return (
        <>
            {!isFetched && <Loader />}

            <strong>Create Reminder</strong>
            <div id={"reminderCreator"}>
                <CreateReminder />
            </div>
            <br />
            <div class={"field"}>
                <div class={"columns is-mobile"}>
                    <div class={"column"}>
                        <strong>Reminders</strong>
                    </div>
                    <div class={"column is-narrow"}>
                        <div class="control has-icons-left">
                            <div class="select is-small">
                                <select
                                    id="orderBy"
                                    onInput={(ev) => {
                                        setSort(ev.currentTarget.value as Sort);
                                    }}
                                >
                                    <option value={Sort.Time} selected={sort == Sort.Time}>
                                        Time
                                    </option>
                                    <option value={Sort.Name} selected={sort == Sort.Name}>
                                        Name
                                    </option>
                                    <option value={Sort.Channel} selected={sort == Sort.Channel}>
                                        Channel
                                    </option>
                                </select>
                            </div>
                            <div class="icon is-small is-left">
                                <i class="fas fa-sort-amount-down"></i>
                            </div>
                        </div>
                    </div>
                    <div class={"column is-narrow"}>
                        <div class="control has-icons-left">
                            <div class="select is-small">
                                <select
                                    id="expandAll"
                                    onInput={(ev) => {
                                        if (ev.currentTarget.value === "expand") {
                                            setCollapsed(false);
                                        } else if (ev.currentTarget.value === "collapse") {
                                            setCollapsed(true);
                                        }
                                    }}
                                >
                                    <option value="" selected></option>
                                    <option value="expand">Expand All</option>
                                    <option value="collapse">Collapse All</option>
                                </select>
                            </div>
                            <div class="icon is-small is-left">
                                <i class="fas fa-expand-arrows"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id={"guildReminders"} className={isFetching ? "loading" : ""}>
                {isSuccess &&
                    guildReminders
                        .sort((r1, r2) => {
                            if (sort === Sort.Time) {
                                return r1.utc_time > r2.utc_time ? 1 : -1;
                            } else if (sort === Sort.Name) {
                                return r1.name > r2.name ? 1 : -1;
                            } else {
                                return r1.channel > r2.channel ? 1 : -1;
                            }
                        })
                        .map((reminder) => {
                            let breaker = <></>;
                            if (sort === Sort.Channel && channels) {
                                if (
                                    prevReminder === null ||
                                    prevReminder.channel !== reminder.channel
                                ) {
                                    const channel = channels.find(
                                        (ch) => ch.id === reminder.channel,
                                    );
                                    breaker = <div class={"channel-tag"}>#{channel.name}</div>;
                                }
                            }

                            prevReminder = reminder;

                            return (
                                <>
                                    {breaker}
                                    <EditReminder
                                        key={reminder.uid}
                                        reminder={reminder}
                                        globalCollapse={collapsed}
                                    />
                                </>
                            );
                        })}
            </div>
        </>
    );
};