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, fetchUserInfo, GuildInfo } from "../../api";
import { TimezonePicker } from "../TimezonePicker";
import "./styles.scss";
import { Link, useLocation } from "wouter";

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

const SidebarContent = ({ guilds }: ContentProps) => {
    const guildEntries = guilds.map((guild) => <GuildEntry guild={guild} />);
    const [loc] = useLocation();
    const { data: userInfo } = useQuery({ ...fetchUserInfo() });

    return (
        <>
            <a href="/">
                <Brand />
            </a>
            <Wave />
            <aside class="menu theme-dark">
                <ul class="menu-list">
                    <li>
                        <Link
                            class={loc.startsWith("/@me") ? "is-active switch-pane" : "switch-pane"}
                            href={"/@me/reminders"}
                        >
                            <>
                                <span class="guild-name">@{userInfo?.name || "unknown"}</span>
                            </>
                        </Link>
                    </li>
                </ul>
                <p class="menu-label">Servers</p>
                <ul class="menu-list guildList">{guildEntries}</ul>
                <div
                    class="aside-footer"
                    style={{
                        position: "sticky",
                        bottom: "0px",
                    }}
                >
                    <p class="menu-label">Options</p>
                    <ul class="menu-list">
                        <li>
                            <div id="bottom-sidebar"></div>
                            <TimezonePicker />
                            <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>
        </>
    );
};
