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

import {
  useEtcStore,
  useAvatarStore,
  useNoteStore,
  useSiteStore,
  useWowStore,
} from "src/Stores";
import SignInWindow from "src/site/SignInWindow";
import useSiteComponent from "src/site/useSiteComponent";
import {
  AvatarLoading,
  EtcLoading,
  NotesLoading,
  SiteLoading,
  WowLoading,
} 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 WowView = lazy(() => import("src/wow/WowView"));
const EtcView = lazy(() => import("src/etc/EtcView"));

export default observer(() => {
  const { isLoading: isNoteLoading } = useNoteStore();
  const { isLoading: isSiteLoading } = useSiteStore();
  const { isLoading: isAvatarLoading } = useAvatarStore();
  const { isLoading: isWowLoading } = useWowStore();
  const { isLoading: isEtcLoading } = 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(isSiteLoading, "/qwilight/site")}
                >
                  {t("toSite")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/avatar")}>
                <Button color={getColor(isAvatarLoading, "/qwilight/avatar")}>
                  {t("toAvatar")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/wow")}>
                <Button color={getColorIfEquals(isWowLoading, "/qwilight/wow")}>
                  {t("toWow")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/qwilight/etc")}>
                <Button color={getColorIfEquals(isEtcLoading, "/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"
            element={
              <Suspense fallback={<NotesLoading />}>
                <NoteView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/site"
            element={
              <Suspense fallback={<SiteLoading />}>
                <SiteView
                  titleComponent={titleComponent}
                  siteYellsView={siteYellsView}
                />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/avatar/:wantAvatarName?"
            element={
              <Suspense fallback={<AvatarLoading />}>
                <AvatarView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/wow"
            element={
              <Suspense fallback={<WowLoading />}>
                <WowView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight/etc"
            element={
              <Suspense fallback={<EtcLoading />}>
                <EtcView />
              </Suspense>
            }
          />
          <Route
            path="/qwilight"
            element={<Navigate to={getTo("/qwilight/note")} replace />}
          />
        </Routes>
      </Container>

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