"use client";

import LogInWindow from "@/app/[language]/site/components/LogInWindow";
import usewsAPI from "@/app/[language]/site/lib/useWSAPI";
import platform from "@/assets/discord-logo-white.png";
import withQueryClient from "@/hoc/withQueryClient";
import { useSiteStore } from "@/state/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();

  usewsAPI();

  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 (
    <>
      <Container>
        <div ref={titleComponent}>
          <Navbar>
            <NavbarBrand href="/">
              <Image
                alt=""
                width={48}
                height={48}
                src="/qwilight/favicon.ico"
                priority
              />
            </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>
        {children}
      </Container>

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