import { useContext, useEffect, useState } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import collapseMenu from "~/assets/images/map_bi/content/collapse_menu.png";
import collapseMenuBg from "~/assets/images/map_bi/content/collapse_menu_bg.png";
import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
import IndexInfo from "~/pages/Container/Map/components/Content/port/IndexInfo";
import PortMenJin from "~/pages/Container/Map/components/Content/port/MenJin";
import PortIndex from "~/pages/Container/Map/components/Content/port/PortIndex";
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 = () => {
    if (!currentBranchOffice) {
      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 renderContent = () => {
    if (pureMap || collapse)
      return null;

    return (
      <div className="map_content_container__content">
        {!currentPort && <IndexInfo />}
        {currentPort === "00003" && renderPortContent()}
      </div>
    );
  };

  const renderCollapseMenu = () => {
    if (pureMap)
      return null;
    if (currentPort) {
      return (
        <div
          className={`collapse_menu ${collapse ? "active" : ""}`}
          style={{ backgroundImage: `url(${collapseMenuBg})` }}
          onClick={onChangeCollapse}
        >
          <img src={collapseMenu} 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;