import { useQuery } from "react-query";
import { DesktopSidebar } from "./DesktopSidebar";
import { MobileSidebar } from "./MobileSidebar";
import { Brand } from "./Brand";
import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api";

type ContentProps = {
    guilds: GuildInfo[];
};

const SidebarContent = ({ guilds }: ContentProps) => {
    const guildEntries = guilds.map((guild) => <GuildEntry guild={guild}></GuildEntry>);

    return (
        <>
            <a href="/">
                <Brand></Brand>
            </a>
            <Wave></Wave>
            <aside class="menu">
                <p class="menu-label">Servers</p>
                <ul class="menu-list guildList">{guildEntries}</ul>
                <div class="aside-footer">
                    <p class="menu-label">Options</p>
                    <ul class="menu-list">
                        <li>
                            <a class="show-modal" data-modal="dataManagerModal">
                                <span class="icon">
                                    <i class="fas fa-exchange"></i>
                                </span>{" "}
                                Import/Export
                            </a>
                            <a class="show-modal" data-modal="chooseTimezoneModal">
                                <span class="icon">
                                    <i class="fas fa-map-marked"></i>
                                </span>{" "}
                                Timezone
                            </a>
                            <a href="/login/discord/logout">
                                <span class="icon">
                                    <i class="fas fa-sign-out"></i>
                                </span>{" "}
                                Log out
                            </a>
                            <a href="https://discord.jellywx.com" class="feedback">
                                <span class="icon">
                                    <i class="fab fa-discord"></i>
                                </span>{" "}
                                Give feedback
                            </a>
                        </li>
                    </ul>
                </div>
            </aside>
        </>
    );
};

export const Sidebar = () => {
    const { status, data } = useQuery(fetchUserGuilds());

    let content = <SidebarContent guilds={[]}></SidebarContent>;
    if (status === "success") {
        content = <SidebarContent guilds={data}></SidebarContent>;
    }

    return (
        <>
            <DesktopSidebar>{content}</DesktopSidebar>
            <MobileSidebar>{content}</MobileSidebar>
        </>
    );
};
