"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 (
    <>
      <Container>
        <div ref={titleView}>
          <Navbar>
            <NavbarBrand href="/">
              <Image
                alt=""
                width={48}
                height={48}
                src="/favicon.ico"
                priority
              />
            </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>
        {children}
        {isAvatarViewVisible && (
          <div ref={avatarView}>
            <hr />
            <AvatarView isSessionLoading={isSessionLoading} />
          </div>
        )}
      </Container>

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