import "@/assets/styles/base.css";
// 关于路由
import React, { useCallback, useEffect, useState } from "react";
import { Router, Route, Switch } from "react-router-dom";
import history from "./utils/history";
import SpinLoding from "./components/SpinLoding";
import MessageCom from "./components/Message";
import NotFound from "./components/NotFound";
import { baseUrl } from ".";
import classNames from "classnames";
import Z1Search from "./pages/Z1Search";
import B1Card from "./pages/B1Card";
const A1Home = React.lazy(() => import("./pages/A1Home"));
const B1Village = React.lazy(() => import("./pages/B1Village"));
const C1Architec = React.lazy(() => import("./pages/C1Architec"));
const D1Build = React.lazy(() => import("./pages/D1Build"));

const tabList = [
  { id: 1, name: "总览", path: "/" },
  { id: 2, name: "村落", path: "/village" },
  { id: 3, name: "建筑", path: "/architec" },
  { id: 4, name: "构件", path: "/build" },
];

export default function App() {
  const [routerAc, setRouterAc] = useState("/");

  // 搜查页面
  const [searchShow, setSearchShow] = useState(false);

  // 顶部tab的展开和收起
  const [tabShow, setTabShow] = useState(true);

  // 视频的播放
  const [videoShow, setVideoShow] = useState(false);

  // 是否需要显示视频
  const [isVideoShow, setIsVideoShow] = useState(false);
  useEffect(() => {
    if (window.location.hash === "#/") setIsVideoShow(true);

    setRouterAc(window.location.hash);

    window.addEventListener(
      "hashchange",
      () => {
        setRouterAc(window.location.hash);
      },
      true
    );
  }, []);

  // 顶部tab的切换
  const cutTab = useCallback((id: number, path: string) => {
    if (id !== 2) {
      history.push(path);
      setTab2Show(false);
    } else setTab2Show(true);
  }, []);

  const [tab2Show, setTab2Show] = useState(false);

  return (
    <div id="App">
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            {/* 总览 */}
            <Route path="/" exact component={A1Home} />
            {/* 村落 */}
            <Route path="/village" component={B1Village} />
            {/* 建筑 */}
            <Route path="/architec" component={C1Architec} />
            {/* 构件 */}
            <Route path="/build" component={D1Build} />

            {/* 找不到页面 */}
            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      {/* 视频加载中 */}
      {videoShow && isVideoShow ? (
        <div className="Appvideo">
          <video
            onEnded={() => setVideoShow(false)}
            src={`${baseUrl}/A1Home/pc/start.mp4`}
            autoPlay
            muted
          ></video>
        </div>
      ) : null}

      {/* 顶部tab */}
      <div
        className="Apptab"
        style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/tab.png)` }}
        hidden={!tabShow}
      >
        {tabList.map((v) => (
          <div
            onClick={() => cutTab(v.id, v.path)}
            className={classNames(
              "ApptabRow",
              (routerAc === "#/" && v.id === 1 && !tab2Show) ||
                (routerAc.includes("#" + v.path) && v.id !== 1 && !tab2Show) ||
                (tab2Show && v.id === 2)
                ? "ApptabRowAc"
                : ""
            )}
            key={v.id}
          >
            {v.name}
          </div>
        ))}

        {/* 搜索按钮 */}

        <div className="APPtabSearch" onClick={() => setSearchShow(true)}></div>

        {/* 展开和收起按钮 */}
        <div className="APPtabShow" onClick={() => setTabShow(false)}></div>
      </div>

      {/* 展开按钮 */}
      <div
        className="APPtabHide"
        onClick={() => setTabShow(true)}
        hidden={tabShow}
      ></div>

      {/* 点击搜索出来的页面 */}
      {searchShow ? <Z1Search colseFu={() => setSearchShow(false)} /> : null}

      {/* 点击顶部的村落出来的选择卡 */}
      <B1Card isShow={!tab2Show} closeFu={() => setTab2Show(false)} />

      {/* antd 轻提示 ---兼容360浏览器 */}
      <MessageCom />
    </div>
  );
}
