"use client";

import LogInWindow from "@/app/[language]/site/components/LogInWindow";
import useSiteComponent from "@/app/[language]/site/query/useSiteComponent";
import platform from "@/assets/discord-logo-white.png";
import withQueryClient from "@/hoc/withQueryClient";
import { useSiteStore } from "@/store/Stores";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { ReactNode, useEffect, 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(({ children }: { children: ReactNode }) => {
  const t = useTranslations();
  const titleComponent = useRef<HTMLDivElement>(null);
  const siteYellsView = useRef<HTMLDivElement>(null);
  const { setComponents } = useSiteStore();

  useSiteComponent();

  const isPath = useIsPath();

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

  const onPlatform = () => {
    window.open("https://taehui.ddns.net/qwilight/platform");
  };

  useEffect(() => {
    setComponents(titleComponent, siteYellsView);
  }, [setComponents]);

  return (
    <>
      <div ref={titleComponent}>
        <Navbar>
          <NavbarBrand href="/">
            <Image alt="" width={48} height={48} src="/qwilight/favicon.ico" />
          </NavbarBrand>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Link href={"/note"}>
                <Button color={getColor("/note")}>{t("toNote")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href={"/site"}>
                <Button color={getColor("/site")}>{t("toSite")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href={"/avatar"}>
                <Button color={getColor("/avatar")}>{t("toAvatar")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href={"/hall"}>
                <Button color={getColor("/hall")}>{t("toHall")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link href={"/etc"}>
                <Button color={getColor("/etc")}>{t("toEtc")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Button color="danger" onClick={onPlatform}>
                <Image alt="" height={12} src={platform} />
              </Button>
            </Col>
          </Row>
        </Navbar>
      </div>
      <Container>{children}</Container>

      <ToastContainer theme="dark" closeButton={false} hideProgressBar />
      <LogInWindow />
    </>
  );
});