import { useQuery } from "react-query";
import { fetchUserReminders } from "../../api";
import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder";
import { useState } from "preact/hooks";
import { Loader } from "../Loader";

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

export const UserReminders = () => {
    const {
        isSuccess,
        isFetching,
        isFetched,
        data: guildReminders,
    } = useQuery(fetchUserReminders());

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

    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>
                                    </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 {
                                    return r1.name > r2.name ? 1 : -1;
                                }
                            })
                            .map((reminder) => (
                                <EditReminder
                                    key={reminder.uid}
                                    reminder={reminder}
                                    globalCollapse={collapsed}
                                />
                            ))}
                </div>
            </div>
        </>
    );
};