import { AnimatePresence, motion } from "motion/react";
import { useContext } 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 "./index.less";

// 港区选择区从上方弹入；统计卡片保持原有缩放回弹效果。
const containerAnimation = {
  initial: { y: -120, opacity: 0, scale: 0.9 },
  animate: {
    y: [-120, 40, -10, 0],
    opacity: [0, 1, 1, 1],
    scale: [0.9, 1.05, 0.98, 1],
    transition: { duration: 0.7, times: [0, 0.5, 0.75, 1], ease: [0.34, 1.56, 0.64, 1] },
  },
  exit: {
    y: [0, -50, 20, -120],
    opacity: [1, 1, 0.8, 0],
    scale: [1, 1.02, 0.95, 0.85],
    transition: { duration: 0.5, times: [0, 0.2, 0.5, 1], ease: [0.68, -0.6, 0.32, 1.6] },
  },
};

const statisticAnimation = {
  initial: { scale: 0, opacity: 0 },
  animate: {
    scale: [0, 1.15, 0.92, 1],
    opacity: [0, 1, 1, 1],
    transition: { duration: 0.7, times: [0, 0.4, 0.7, 1], ease: [0.34, 1.56, 0.64, 1] },
  },
  exit: {
    scale: [1, 1.1, 0.85, 0],
    opacity: [1, 1, 0.6, 0],
    transition: { duration: 0.5, times: [0, 0.3, 0.6, 1], ease: [0.68, -0.6, 0.32, 1.6] },
  },
};

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

  const list = [
    { label: "秦皇岛西", portArea: 3 },
    { label: "秦皇岛港区", portArea: "" },
    { label: "秦皇岛东", portArea: 2 },
  ];

  const isVisible = currentPort === "00003" && !currentBranchOffice && !pureMap;

  const onChangePortArea = (currentSelectPortArea) => {
    if (portArea === currentSelectPortArea)
      return;
    actions.setPortArea(currentSelectPortArea);
    mapMethods.current.removeBranchOfficePoint();
    mapMethods.current.addBranchOfficePoint(currentSelectPortArea);
    actions.resetBottomUtils();
  };

  return (
    <div className="map_content_center_options_container">
      <AnimatePresence>
        {isVisible && (
          <motion.div className="center_utils" {...containerAnimation}>
            <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(${portArea === item.portArea
                      ? [tabLeftOnImg, tabMidOnImg, tabRightOnImg][index]
                      : [tabLeftImg, tabMidImg, tabRightImg][index]})`,
                  }}
                  onClick={() => onChangePortArea(item.portArea)}
                >
                  {item.label}
                </div>
              ))}
            </div>
            <div className="statistics">
              <AnimatePresence>
                {["", 3].includes(portArea) && (
                  <motion.div key="west" {...statisticAnimation}>
                    <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>
                )}
              </AnimatePresence>
              <AnimatePresence>
                {["", 2].includes(portArea) && (
                  <motion.div key="east" {...statisticAnimation}>
                    <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>
                )}
              </AnimatePresence>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default CenterUtils;
