import { useParams } from "wouter";
import { useQuery } from "react-query";
import { fetchGuildReminders } from "../../api";
import { QueryKeys } from "../../consts";
import { EditReminder } from "../Reminder/EditReminder";
import { CreateReminder } from "../Reminder/CreateReminder";

export const GuildReminders = () => {
    const { guild } = useParams();

    const { isSuccess, data } = useQuery({
        queryKey: [QueryKeys.GUILD_REMINDERS, guild],
        queryFn: () => fetchGuildReminders(guild),
    });

    return (
        <div style={{ margin: "0 12px 12px 12px" }}>
            <strong>Create Reminder</strong>
            <div id={"reminderCreator"}>
                <CreateReminder></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">
                                    <option value="time" selected>
                                        Time
                                    </option>
                                    <option value="name">Name</option>
                                    <option value="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">
                                    <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"}>
                {isSuccess &&
                    data.map((reminder) => <EditReminder reminder={reminder}></EditReminder>)}
            </div>
        </div>
    );
};