import { useReminder } from "./ReminderContext";
import { Name } from "./Name";
import { fetchGuildChannels, Reminder } from "../../api";
import { useQuery } from "react-query";
import { useParams } from "wouter";

export const TopBar = ({ toggleCollapsed }) => {
    const { guild } = useParams();
    const [reminder] = useReminder();

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

    const channelName = (reminder: Reminder) => {
        const channel = guildChannels.find((c) => c.id === reminder.channel);
        return channel === undefined ? "" : channel.name;
    };

    return (
        <div class="columns is-mobile column reminder-topbar">
            {isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
            <Name />
            <div class="hide-button-bar">
                <button class="button hide-box" onClick={toggleCollapsed}>
                    <span class="is-sr-only">Hide reminder</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
            </div>
        </div>
    );
};
