"use client";

import useWSAPI from "@/app/[language]/site/lib/useWSAPI";
import platform from "@/assets/discord-logo-white.png";
import AvatarView from "@/components/AvatarView";
import withQueryClient from "@/hoc/withQueryClient";
import { useSiteStore } from "@/state/Stores";
import { getDefaultAvatarID } from "@/utilities/Utility";
import { wwwAPIPath } from "@/utilities/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { ReactNode, useLayoutEffect, useRef } from "react";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavbarBrand from "react-bootstrap/NavbarBrand";
import NavbarCollapse from "react-bootstrap/NavbarCollapse";
import NavbarToggle from "react-bootstrap/NavbarToggle";
import NavDropdown from "react-bootstrap/NavDropdown";
import NavLink from "react-bootstrap/NavLink";
import { ToastContainer } from "react-toastify";
import { useIsPath } from "taehui-lib/fe-utilities";

export default withQueryClient(
  observer(({ children }: { children: ReactNode }) => {
    const t = useTranslations();
    const titleView = useRef<HTMLDivElement>(null);
    const { setTitleView: setTitleView, siteAvatarID } = useSiteStore();

    useWSAPI();

    const isPath = useIsPath();

    useLayoutEffect(() => {
      setTitleView(titleView);
    }, [setTitleView]);

    return (
      <>
        <Navbar
          bg="dark"
          sticky="top"
          collapseOnSelect
          expand="md"
          ref={titleView}
        >
          <Container>
            <NavbarBrand href="/">
              <Image
                alt=""
                width={24}
                height={24}
                src="/qwilight/favicon.ico"
                priority
              />
            </NavbarBrand>
            <NavbarToggle aria-controls="collapsable" />
            <NavbarCollapse id="collapsable">
              <Nav>
                <NavLink as={Link} href="/remit" active={isPath("/remit")}>
                  {t("remit")}
                </NavLink>
                <NavLink as={Link} href="/note" active={isPath("/note")}>
                  {t("note")}
                </NavLink>
                <NavLink as={Link} href="/site" active={isPath("/site")}>
                  {t("site")}
                </NavLink>
                <NavLink as={Link} href="/avatar" active={isPath("/avatar")}>
                  {t("avatar")}
                </NavLink>
                <NavLink as={Link} href="/hall" active={isPath("/hall")}>
                  {t("hall")}
                </NavLink>
                <NavLink as={Link} href="/etc" active={isPath("/etc")}>
                  {t("etc")}
                </NavLink>
                <NavLink href="/qwilight/platform">
                  <Image alt="" height={12} src={platform} />
                </NavLink>
                <NavDropdown
                  title={
                    <Image
                      alt=""
                      src={`${wwwAPIPath}/drawing?avatarID=${getDefaultAvatarID(
                        siteAvatarID,
                      )}&drawingVariety=0`}
                      className="rounded border"
                      width={24}
                      height={24}
                    />
                  }
                >
                  <Container>
                    <AvatarView />
                  </Container>
                </NavDropdown>
              </Nav>
            </NavbarCollapse>
          </Container>
        </Navbar>
        <Container className="p-4">{children}</Container>

        <ToastContainer theme="dark" hideProgressBar />
      </>
    );
  }),
);