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

import {
  useAvatarStore,
  useEtcStore,
  useHOFStore,
  useNoteStore,
  useSiteStore,
} from "src/Stores";
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 observer(() => {
  const { isLoading: isNoteLoading } = useNoteStore();
  const { isLoading: isSiteViewLoading } = useSiteStore();
  const { isLoading: isAvatarViewLoading } = useAvatarStore();
  const { isLoading: isHOFViewLoading } = useHOFStore();
  const { isLoading: isEtcViewLoading } = useEtcStore();
  const { t } = useTranslation();
  const titleComponent = useRef<HTMLDivElement>(null);
  const siteYellsView = useRef<HTMLDivElement>(null);

  useSiteComponent(siteYellsView);

  const { pathname } = useLocation();

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

  const getColorIfEquals = (isLoading: boolean, route: string) =>
    isLoading ? "warning" : pathname === 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={getColorIfEquals(isNoteLoading, "/qwilight/note")}
                >
                  {t("toNote")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/site")}>
                <Button
                  color={getColorIfEquals(isSiteViewLoading, "/qwilight/site")}
                >
                  {t("toSite")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/avatar")}>
                <Button
                  color={getColor(isAvatarViewLoading, "/qwilight/avatar")}
                >
                  {t("toAvatar")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/hof")}>
                <Button
                  color={getColorIfEquals(isHOFViewLoading, "/qwilight/hof")}
                >
                  {t("toHOF")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/etc")}>
                <Button
                  color={getColorIfEquals(isEtcViewLoading, "/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 />
    </>
  );
});