import { lazy, Suspense, useEffect, useMemo, useRef } from "react";
import { Link, 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 SignUpView from "src/avatar/SignUpView";
import ModifyAvatarView from "src/avatar/ModifyAvatarView";
import CommentaryView from "src/commentary/CommentaryView";
import TaehuiIntroView from "src/taehui/TaehuiIntroView";
import TaehuiInfoView from "src/taehui/TaehuiInfoView";
import useSession from "src/taehui/useSession";

import vcs from "src/assets/vcs.png";

import scss from "src/taehui/TaehuiView.module.scss";
import {
  AvatarViewLoading,
  EssayViewLoading,
  ForumsViewLoading,
  ForumViewLoading,
  WantViewLoading,
} from "src/Loading";

import { useTaehuiStore } from "src/Stores";

const AvatarView = lazy(() => import("src/avatar/AvatarView"));
const ForumsView = lazy(() => import("src/forums/ForumsView"));
const ForumView = lazy(() => import("src/forum/ForumView"));
const EssayView = lazy(() => import("src/forum/EssayView"));
const PostEssayView = lazy(() => import("src/forum/PostEssayView"));
const WantView = lazy(() => import("src/want/WantView"));

const TaehuiView = () => {
  const { t } = useTranslation();

  const { setTitleViewHeight, setAvatarViewHeight } = useTaehuiStore();

  const titleView = useRef<HTMLDivElement>(null);
  const avatarView = useRef<HTMLDivElement>(null);

  const isSessionLoading = useSession();

  const { pathname } = useLocation();

  const isAvatarViewVisible = useMemo(
    () =>
      !pathname.startsWith("/avatar") && !pathname.startsWith("/commentary"),
    [pathname],
  );

  useEffect(() => {
    setTitleViewHeight(titleView.current?.clientHeight ?? 0);
    setAvatarViewHeight(avatarView.current?.clientHeight ?? 0);
  }, [setAvatarViewHeight, setTitleViewHeight]);

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

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

  return (
    <>
      <div ref={titleView}>
        <Navbar>
          <NavbarBrand href="/">
            <img alt="" src="/logo512.png" className={scss.taehui} />
          </NavbarBrand>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Link to={getTo("/forums")}>
                <Button color={getColor("/forums")}>{t("forums")}</Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/forums/qwilight")}>
                <Button color={getColor("/forums/qwilight")}>
                  {t("qwilightForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/forum/software")}>
                <Button color={getColor("/forum/software")}>
                  {t("softwareForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/forum/assist")}>
                <Button color={getColor("/forum/assist")}>
                  {t("assistForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/forum/date")}>
                <Button color={getColor("/forum/date")}>
                  {t("dateForum")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/taehuiInfo")}>
                <Button color={getColor("/taehuiInfo")}>
                  {t("taehuiInfo")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <Link to={getTo("/commentary")}>
                <Button color={getColor("/commentary")}>
                  {t("commentary")}
                </Button>
              </Link>
            </Col>
            <Col className="m-1" xs="auto">
              <a href="/qwilight">
                <Button color="danger">Qwilight</Button>
              </a>
            </Col>
            <Col className="m-1" xs="auto">
              <a href="/vcs">
                <Button color="danger">
                  <img alt="" className={scss.vcs} src={vcs} />
                </Button>
              </a>
            </Col>
          </Row>
        </Navbar>
      </div>
      <Container>
        <Routes>
          <Route path="/" element={<TaehuiIntroView />} />
          <Route path="/taehuiInfo" element={<TaehuiInfoView />} />
          <Route path="/avatar/w" element={<SignUpView />} />
          <Route path="/avatar/m" element={<ModifyAvatarView />} />
          <Route
            path="/want/:wantVariety/:wantInput"
            element={
              <Suspense fallback={<WantViewLoading />}>
                <WantView />
              </Suspense>
            }
          />
          <Route
            path="/forums/:forumGroup?"
            element={
              <Suspense fallback={<ForumsViewLoading />}>
                <ForumsView />
              </Suspense>
            }
          />
          <Route
            path="/forum/:forumID"
            element={
              <Suspense fallback={<ForumViewLoading />}>
                <ForumView />
              </Suspense>
            }
          />
          <Route
            path="/forum/:forumID/w"
            element={
              <Suspense>
                <PostEssayView mode="w" />
              </Suspense>
            }
          />
          <Route
            path="/forum/:forumID/:essayID"
            element={
              <Suspense fallback={<EssayViewLoading />}>
                <EssayView />
              </Suspense>
            }
          />
          <Route
            path="/forum/:forumID/:essayID/m"
            element={
              <Suspense>
                <PostEssayView mode="m" />
              </Suspense>
            }
          />
          <Route path="/commentary" element={<CommentaryView />} />
        </Routes>
        {isAvatarViewVisible && (
          <div ref={avatarView}>
            <hr />
            <Suspense fallback={<AvatarViewLoading />}>
              <AvatarView isSessionLoading={isSessionLoading} />
            </Suspense>
          </div>
        )}
      </Container>

      <ToastContainer closeButton={false} hideProgressBar />
    </>
  );
};

export default TaehuiView;
