import { motion } from "motion/react";
import { useContext, useState } from "react";
import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png";
import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png";
import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.png";
import tabLeftOnImg from "~/assets/images/map_bi/center_utils/tableft_on.png";
import tabMidImg from "~/assets/images/map_bi/center_utils/tabmid.png";
import tabMidOnImg from "~/assets/images/map_bi/center_utils/tabmid_on.png";
import tabRightImg from "~/assets/images/map_bi/center_utils/tabright.png";
import tabRightOnImg from "~/assets/images/map_bi/center_utils/tabright_on.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import { useCenterUtilsAnimation } from "./useCenterUtilsAnimation";
import "./index.less";

function CenterUtils(props) {
  const { currentPort, currentBranchOffice, pureMap, mapMethods } = useContext(Context);

  const list = [
    { label: "秦皇岛西", area: "2" },
    { label: "秦皇岛港区", area: "" },
    { label: "秦皇岛东", area: "1" },
  ];
  const [activeIndex, setActiveIndex] = useState(1);

  const { controls: containerControls, isVisible: isContainerVisible } = useCenterUtilsAnimation(
    (currentPort === "00003" && !currentBranchOffice && !pureMap),
    "up-down",
  );

  const { controls: westControls, isVisible: isWestVisible } = useCenterUtilsAnimation(
    ((currentPort === "00003" && !currentBranchOffice && !pureMap) && (activeIndex === 0 || activeIndex === 1)),
    "scale",
  );

  const { controls: eastControls, isVisible: isEastVisible } = useCenterUtilsAnimation(
    ((currentPort === "00003" && !currentBranchOffice && !pureMap) && (activeIndex === 2 || activeIndex === 1)),
    "scale",
  );

  const onChangeArea = (index) => {
    if (index === activeIndex)
      return;
    setActiveIndex(index);
    props.setArea(list[index].area);
    mapMethods.current.removeBranchOfficePoint();
    mapMethods.current.addBranchOfficePoint(list[index].area);
    mitt.emit(resetBottomCurrentIndexMittKey);
    mitt.emit(resetAllBottomUtilsCheckMittKey);
    mitt.emit(deletePeoplePositionPointMittKey);
  };

  return (
    <div className="map_content_center_options_container">
      <motion.div animate={containerControls} className="center_utils">
        {isContainerVisible && (
          <>
            <div className="center_options">
              <div
                className="guang"
                style={{ backgroundImage: `url(${guangImg})` }}
              />
              {list.map((item, index) => (
                <div
                  key={index}
                  className={`option option${index}`}
                  style={{
                    backgroundImage: `url(${activeIndex === index
                      ? [tabLeftOnImg, tabMidOnImg, tabRightOnImg][index]
                      : [tabLeftImg, tabMidImg, tabRightImg][index]})`,
                  }}
                  onClick={() => onChangeArea(index)}
                >
                  {item.label}
                </div>
              ))}
            </div>
            <div className="statistics">
              <motion.div animate={westControls}>
                {isWestVisible && (
                  <div className="statistic">
                    <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
                    <div className="info">
                      <div className="value">人数：33人</div>
                      <div className="value">车辆：33辆</div>
                    </div>
                  </div>
                )}
              </motion.div>
              <motion.div animate={eastControls}>
                {isEastVisible && (
                  <div className="statistic">
                    <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
                    <div className="info">
                      <div className="value">人数：33人</div>
                      <div className="value">车辆：33辆</div>
                    </div>
                  </div>
                )}
              </motion.div>
            </div>
          </>
        )}
      </motion.div>
    </div>
  );
}

export default CenterUtils;
