"use client";

import useSession from "@/app/[language]/query/useSession";
import vcs from "@/assets/vcs.png";
import AvatarView from "@/components/AvatarView";
import withQueryClient from "@/hoc/withQueryClient";
import { useTaehuiStore } from "@/state/Stores";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { ReactNode, useEffect, useMemo, useRef } from "react";
import { ToastContainer } from "react-toastify";
import { Button, Col, Container, Navbar, NavbarBrand, Row } from "reactstrap";
import { useIsPath } from "taehui-ts/fe-utilities";

export default withQueryClient(function TaehuiView({
  children,
}: {
  children: ReactNode;
}) {
  const t = useTranslations();

  const { setTitleViewHeight, setAvatarViewHeight } = useTaehuiStore();

  const titleView = useRef<HTMLDivElement>(null);
  const avatarView = useRef<HTMLDivElement>(null);

  const isSessionLoading = useSession();

  const isPath = useIsPath();

  const isAvatarViewVisible = useMemo(
    () => !isPath("/avatar") && !isPath("/commentary"),
    [isPath],
  );

  useEffect(() => {
    setTitleViewHeight(titleView.current?.clientHeight ?? 0);
    setAvatarViewHeight(avatarView.current?.clientHeight ?? 0);
  }, [setAvatarViewHeight, setTitleViewHeight]);

  const getColor = (route: string, equals = false) =>
    isPath(route, equals) ? "primary" : "secondary";

  return (
    <>
      <div ref={titleView}>
        <Navbar>
          <NavbarBrand href="/">
            <Image alt="" width={48} height={48} src="/favicon.ico" />
          </NavbarBrand>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Link href="/forums">
                <Button color={getColor("/forums", true)}>{t("forums")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href="/forums/qwilight">
                <Button color={getColor("/forums/qwilight")}>
                  {t("qwilightForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href="/forum/software">
                <Button color={getColor("/forum/software")}>
                  {t("softwareForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href="/forum/assist">
                <Button color={getColor("/forum/assist")}>
                  {t("assistForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href="/forum/date">
                <Button color={getColor("/forum/date")}>
                  {t("dateForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href="/ppt">
                <Button color={getColor("/ppt")}>{t("ppt")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href="/commentary">
                <Button color={getColor("/commentary")}>
                  {t("commentary")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <a href="/qwilight">
                <Button color="danger">Qwilight</Button>
              </a>
            </Col>
            <Col className="m-1" xs="auto">
              <a href="/vcs">
                <Button color="danger">
                  <Image alt="" src={vcs} height={16} />
                </Button>
              </a>
            </Col>
          </Row>
        </Navbar>
      </div>
      <Container>
        {children}
        {isAvatarViewVisible && (
          <div ref={avatarView}>
            <hr />
            <AvatarView isSessionLoading={isSessionLoading} />
          </div>
        )}
      </Container>

      <ToastContainer closeButton={false} hideProgressBar />
    </>
  );
});