zcloud-gbs-bi-react/src/pages/Container/Map/components/Content/index.js

import { motion } from "motion/react";
import { useContext, useState } from "react";
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 BranchCamera from "~/pages/Container/Map/components/Content/branchOffice/Camera";
import BranchFengBi from "~/pages/Container/Map/components/Content/branchOffice/FengBi";
import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight";
import BranchMenJin from "~/pages/Container/Map/components/Content/branchOffice/MenJin";
import BranchQiXiang from "~/pages/Container/Map/components/Content/branchOffice/QiXiang";
import BranchRenYuan from "~/pages/Container/Map/components/Content/branchOffice/RenYuan";
import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian";
import BranchXiaoFang from "~/pages/Container/Map/components/Content/branchOffice/XiaoFang";
import BranchZhongDian from "~/pages/Container/Map/components/Content/branchOffice/ZhongDian";
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 { useContentAnimation } from "./useContentAnimation";
import "./index.less";

function Content() {
  const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);
  const [collapseLeft, setCollapseLeft] = useState(false);
  const [collapseRight, setCollapseRight] = useState(false);

  const {
    controls: leftControls,
    displayedContent: leftDisplayedContent,
    isVisible: isLeftVisible,
    handleCollapse: handleLeftCollapse,
  } = useContentAnimation(
    { currentPort, currentBranchOffice, bottomUtilsCurrentIndex },
    collapseLeft,
    "left",
    pureMap,
  );

  const {
    controls: rightControls,
    displayedContent: rightDisplayedContent,
    isVisible: isRightVisible,
    handleCollapse: handleRightCollapse,
  } = useContentAnimation(
    { currentBranchOffice, bottomUtilsCurrentIndex },
    collapseRight,
    "right",
    pureMap,
  );

  const renderPortContent = () => {
    const bottomUtilsCurrentType = (leftDisplayedContent.bottomUtilsCurrentIndex !== -1 && portUtilsList[leftDisplayedContent.bottomUtilsCurrentIndex])
      ? portUtilsList[leftDisplayedContent.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 renderBranchOfficeContentLeft = () => {
    const bottomUtilsCurrentType = (leftDisplayedContent.bottomUtilsCurrentIndex !== -1 && branchOfficeUtilsList[leftDisplayedContent.bottomUtilsCurrentIndex])
      ? branchOfficeUtilsList[leftDisplayedContent.bottomUtilsCurrentIndex].type
      : "";
    if (bottomUtilsCurrentType === "")
      return <BranchOfficeIndexLeft />;
    if (bottomUtilsCurrentType === "danger")
      return <BranchWeiXian />;
    if (bottomUtilsCurrentType === "door")
      return <BranchMenJin />;
    if (bottomUtilsCurrentType === "fire")
      return <BranchXiaoFang />;
    if (bottomUtilsCurrentType === "people")
      return <BranchRenYuan />;
    if (bottomUtilsCurrentType === "weather")
      return <BranchQiXiang />;
    if (bottomUtilsCurrentType === "project")
      return <BranchZhongDian />;
    if (bottomUtilsCurrentType === "closedArea")
      return <BranchFengBi />;
    if (bottomUtilsCurrentType === "camera")
      return <BranchCamera />;
  };

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

  const renderContent = () => {
    return (
      <>
        {!leftDisplayedContent.currentPort && (<IndexInfo />)}
        {isLeftVisible && (
          <motion.div
            animate={leftControls}
            className={`map_content_container__content ${(!leftDisplayedContent.currentPort || (leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice)) ? "port" : "branch_office"}`}
            style={{ left: 35 }}
          >
            {(leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice) && renderPortContent()}
            {leftDisplayedContent.currentBranchOffice && renderBranchOfficeContentLeft()}
          </motion.div>
        )}
        {isRightVisible && (
          <motion.div
            animate={rightControls}
            className={`map_content_container__content ${(!leftDisplayedContent.currentPort || (leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice)) ? "port" : "branch_office"}`}
            style={{ right: 35 }}
          >
            {rightDisplayedContent.currentBranchOffice && renderBranchOfficeContentRight()}
          </motion.div>
        )}
      </>
    );
  };

  const renderCollapseMenu = () => {
    if (pureMap)
      return null;

    if (currentPort === "00003" && !currentBranchOffice) {
      return (
        <div
          className={`collapse_menu port left ${collapseLeft ? "active" : ""}`}
          style={{ backgroundImage: `url(${collapseMenuBg1})` }}
          onClick={() => handleLeftCollapse(setCollapseLeft)}
        >
          <img src={collapseMenuImg1} alt="" />
        </div>
      );
    }

    if (currentBranchOffice) {
      const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";

      return (
        <>
          {bottomUtilsCurrentType !== "camera" && (
            <div
              className={`collapse_menu branch_office left ${collapseLeft ? "active" : ""}`}
              style={{ backgroundImage: `url(${collapseMenuBg2})` }}
              onClick={() => handleLeftCollapse(setCollapseLeft)}
            >
              <img src={collapseMenuImg2} alt="" />
            </div>
          )}
          {bottomUtilsCurrentIndex === -1 && (
            <div
              className={`collapse_menu branch_office right ${collapseRight ? "active" : ""}`}
              style={{ backgroundImage: `url(${collapseMenuBg2})` }}
              onClick={() => handleRightCollapse(setCollapseRight)}
            >
              <img src={collapseMenuImg2} alt="" />
            </div>
          )}
        </>
      );
    }
  };

  return (
    <div className="map_content_container">
      {renderContent()}
      {renderCollapseMenu()}
    </div>
  );
}

export default Content;