"use client";

import useSession from "@/app/[language]/query/useSession";
import vcs from "@/assets/vcs.png";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarView from "@/components/AvatarView";
import withQueryClient from "@/hoc/withQueryClient";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { ReactNode } 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 { taehuiAvatarID } = useTaehuiStore();

    const t = useTranslations();

    const isSessionLoading = useSession();

    const isPath = useIsPath();

    return (
      <>
        <Navbar bg="dark" sticky="top" collapseOnSelect expand="lg">
          <Container>
            <NavbarBrand as={Link} href="/">
              <Image
                alt=""
                width={24}
                height={24}
                src="/favicon.ico"
                priority
              />
            </NavbarBrand>
            <NavbarToggle aria-controls="collapsable" />
            <NavbarCollapse id="collapsable">
              <Nav>
                <NavLink
                  as={Link}
                  href="/forums"
                  active={isPath("/forums", true)}
                >
                  {t("forums")}
                </NavLink>
                <NavLink
                  as={Link}
                  href="/forums/qwilight"
                  active={isPath("/forums/qwilight")}
                >
                  {t("forumQwilight")}
                </NavLink>
                <NavLink
                  as={Link}
                  href="/forum/software"
                  active={isPath("/forum/software")}
                >
                  {t("forumSoftware")}
                </NavLink>
                <NavLink
                  as={Link}
                  href="/forum/assist"
                  active={isPath("/forum/assist")}
                >
                  {t("forumAssist")}
                </NavLink>
                <NavLink
                  as={Link}
                  href="/forum/date"
                  active={isPath("/forum/date")}
                >
                  {t("forumDate")}
                </NavLink>
                <NavLink as={Link} href="/ppt" active={isPath("/ppt")}>
                  {t("ppt")}
                </NavLink>
                <NavLink
                  as={Link}
                  href="/commentary"
                  active={isPath("/commentary")}
                >
                  {t("commentary")}
                </NavLink>
                <NavLink href="/qwilight">Qwilight</NavLink>
                <NavLink href="/vcs">
                  <Image alt="" src={vcs} height={12} />
                </NavLink>
                <NavDropdown
                  title={
                    <AvatarDrawing
                      avatarID={taehuiAvatarID}
                      drawingLength={24}
                      drawingHeight={24}
                    />
                  }
                >
                  <Container>
                    <AvatarView isSessionLoading={isSessionLoading} />
                  </Container>
                </NavDropdown>
              </Nav>
            </NavbarCollapse>
          </Container>
        </Navbar>
        <Container className="p-4">{children}</Container>

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