import { useQuery } from "react-query";
import { fetchGuildChannels, fetchGuildReminders } from "../../api";
import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder";
import { 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);

    let prevReminder = null;

    return (
        <>
            {!isFetched && <Loader />}
            <div style={{ margin: "0 12px 12px 12px" }}>
                <strong>Create Reminder</strong>
                <div id={"reminderCreator"}>
                    <CreateReminder />
                </div>
                <br></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>
            </div>
        </>
    );
};