import { useContext, useEffect, useState } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import collapseMenuImg1 from "~/assets/images/map_bi/content/collapse_menu1.png";
import collapseMenuImg2 from "~/assets/images/map_bi/content/collapse_menu2.png";
import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.png";
import collapseMenuBg2 from "~/assets/images/map_bi/content/collapse_menu_bg2.png";
import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
import BranchOfficeIndex from "~/pages/Container/Map/components/Content/branchOffice/Index";
import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
import PortIndex from "~/pages/Container/Map/components/Content/port/Index";
import PortMenJin from "~/pages/Container/Map/components/Content/port/MenJin";
import PortQiXiang from "~/pages/Container/Map/components/Content/port/QiXiang";
import PortRenYuan from "~/pages/Container/Map/components/Content/port/RenYuan";
import PortWeiXian from "~/pages/Container/Map/components/Content/port/WeiXian";
import PortXiaoFang from "~/pages/Container/Map/components/Content/port/XiaoFang";
import PortZhongDian from "~/pages/Container/Map/components/Content/port/ZhongDian";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import { changeContentAnimationKeyMittKey } from "~/pages/Container/Map/js/mittKey";
import "./index.less";

function Content() {
  const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);

  const [animationKey, setAnimationKey] = useState(0);
  const [collapse, setCollapse] = useState(false);

  useEffect(() => {
    setAnimationKey(Math.random());

    mitt.on(changeContentAnimationKeyMittKey, () => {
      setAnimationKey(Math.random());
      setCollapse(false);
    });

    return () => {
      mitt.off(changeContentAnimationKeyMittKey);
    };
  }, []);

  const onChangeCollapse = () => {
    setAnimationKey(Math.random());
    setCollapse(!collapse);
  };

  const renderPortContent = () => {
    const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? portUtilsList[bottomUtilsCurrentIndex].type : "";
    if (bottomUtilsCurrentType === "" || bottomUtilsCurrentType === "camera")
      return <PortIndex />;
    if (bottomUtilsCurrentType === "door")
      return <PortMenJin />;
    if (bottomUtilsCurrentType === "fire")
      return <PortXiaoFang />;
    if (bottomUtilsCurrentType === "danger")
      return <PortWeiXian />;
    if (bottomUtilsCurrentType === "weather")
      return <PortQiXiang />;
    if (bottomUtilsCurrentType === "people")
      return <PortRenYuan />;
    if (bottomUtilsCurrentType === "project")
      return <PortZhongDian />;
    if (bottomUtilsCurrentType === "closedArea")
      return <PortFengBi />;
  };

  const renderBranchOfficeContent = () => {
    const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";
    if (bottomUtilsCurrentType === "")
      return <BranchOfficeIndex />;
  };

  const renderContent = () => {
    if (pureMap || collapse)
      return null;

    return (
      <div className={`map_content_container__content ${currentPort === "00003" && !currentBranchOffice ? "port" : "branch_office"}`}>
        {!currentPort && <IndexInfo />}
        {(currentPort === "00003" && !currentBranchOffice) && renderPortContent()}
        {currentBranchOffice && renderBranchOfficeContent()}
      </div>
    );
  };

  const renderCollapseMenu = () => {
    if (pureMap)
      return null;
    if (currentPort === "00003" && !currentBranchOffice) {
      return (
        <div
          className={`collapse_menu port ${collapse ? "active" : ""}`}
          style={{ backgroundImage: `url(${collapseMenuBg1})` }}
          onClick={onChangeCollapse}
        >
          <img src={collapseMenuImg1} alt="" />
        </div>
      );
    }
    if (currentBranchOffice) {
      return (
        <div
          className={`collapse_menu branch_office ${collapse ? "active" : ""}`}
          style={{ backgroundImage: `url(${collapseMenuBg2})` }}
          onClick={onChangeCollapse}
        >
          <img src={collapseMenuImg2} alt="" />
        </div>
      );
    }
  };

  return (
    <div className="map_content_container">
      <SwitchTransition>
        <CSSTransition
          timeout={500}
          classNames={{
            enter: "animate__animated animate__faster",
            enterActive: "animate__animated animate__faster animate__fadeInLeft",
            exit: "animate__animated animate__faster",
            exitActive: "animate__animated animate__faster animate__fadeOutLeft",
          }}
          unmountOnExit
          key={animationKey}
        >
          <div>
            {renderContent()}
            {renderCollapseMenu()}
          </div>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

export default Content;