import { lazy, Suspense, useRef } from "react";
import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { Button, Col, Container, Navbar, NavbarBrand, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { ToastContainer } from "react-toastify";

import SignInWindow from "src/site/SignInWindow";
import useSiteComponent from "src/site/useSiteComponent";
import {
  AvatarViewLoading,
  EtcViewLoading,
  HOFViewLoading,
  NoteViewLoading,
  SiteViewLoading,
} from "src/Loading";

import platform from "src/assets/discord-logo-white.png";

import scss from "src/qwilight/QwilightView.module.scss";

const NoteView = lazy(() => import("src/note/NoteView"));
const SiteView = lazy(() => import("src/site/SiteView"));
const AvatarView = lazy(() => import("src/avatar/AvatarView"));
const HOFView = lazy(() => import("src/hof/HOFView"));
const EtcView = lazy(() => import("src/etc/EtcView"));

export default function QwilightView() {
  const { t } = useTranslation();
  const titleComponent = useRef<HTMLDivElement>(null);
  const siteYellsView = useRef<HTMLDivElement>(null);

  useSiteComponent(siteYellsView);

  const { pathname } = useLocation();

  const getColor = (route: string) =>
    pathname.startsWith(route) ? "primary" : "secondary";

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

  const getTo = (pathname: string) => ({
    ...window.location,
    pathname,
    search: "",
  });

  return (
    <>
      <div ref={titleComponent}>
        <Navbar>
          <NavbarBrand href="/">
            <img alt="" src="/qwilight/logo512.png" className={scss.qwilight} />
          </NavbarBrand>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/note")}>
                <Button color={getColor("/qwilight/note")}>
                  {t("toNote")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/site")}>
                <Button color={getColor("/qwilight/site")}>
                  {t("toSite")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/avatar")}>
                <Button color={getColor("/qwilight/avatar")}>
                  {t("toAvatar")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/hof")}>
                <Button color={getColor("/qwilight/hof")}>{t("toHOF")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/etc")}>
                <Button color={getColor("/qwilight/etc")}>{t("toEtc")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Button color="danger" onClick={onPlatform}>
                <img alt="" className={scss.platform} src={platform} />
              </Button>
            </Col>
          </Row>
        </Navbar>
      </div>
      <Container>
        <Routes>
          <Route
            path="/qwilight/note/:want?"
            element={
              <Suspense fallback={<NoteViewLoading />}>
                <NoteView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/site"
            element={
              <Suspense fallback={<SiteViewLoading />}>
                <SiteView
                  titleComponent={titleComponent}
                  siteYellsView={siteYellsView}
                />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/avatar/:want?"
            element={
              <Suspense fallback={<AvatarViewLoading />}>
                <AvatarView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/hof"
            element={
              <Suspense fallback={<HOFViewLoading />}>
                <HOFView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/etc"
            element={
              <Suspense fallback={<EtcViewLoading />}>
                <EtcView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight"
            element={<Navigate to={getTo("/qwilight/note")} replace />}
          />
        </Routes>
      </Container>

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