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 BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight";
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 "./index.less";

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

  const [collapseLeft, setCollapseLeft] = useState(false);
  const [collapseRight, setCollapseRight] = useState(false);

  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 renderBranchOfficeContentLeft = () => {
    const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";
    if (bottomUtilsCurrentType === "") {
      return <BranchOfficeIndexLeft />;
    }
  };

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

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

    return (
      <>
        {!collapseLeft && (
          <div
            className={`map_content_container__content ${(!currentPort || (currentPort === "00003" && !currentBranchOffice)) ? "port" : "branch_office"}`}
            style={{ left: 35 }}
          >
            {!currentPort && <IndexInfo />}
            {(currentPort === "00003" && !currentBranchOffice) && renderPortContent()}
            {currentBranchOffice && renderBranchOfficeContentLeft()}
          </div>
        )}
        {!collapseRight && (
          <div
            className={`map_content_container__content ${(!currentPort || (currentPort === "00003" && !currentBranchOffice)) ? "port" : "branch_office"}`}
            style={{ right: 35 }}
          >
            {currentBranchOffice && renderBranchOfficeContentRight()}
          </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={() => {
            setCollapseLeft(!collapseLeft);
          }}
        >
          <img src={collapseMenuImg1} alt="" />
        </div>
      );
    }

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

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

export default Content;