import { useContext, useEffect, useState } from "react";
import { CSSTransition } from "react-transition-group";
import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png";
import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png";
import titleImg from "~/assets/images/map_bi/bottom_utils/title.png";
import titleOnImg from "~/assets/images/map_bi/bottom_utils/title_on.png";
import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  deletePeoplePositionPointMittKey,
  initBottomUtilsMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import { portUtilsList } from "./portUtilsList";
import "./index.less";

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

  const [list, setList] = useState([]);

  const initList = () => {
    setList(!currentBranchOffice ? portUtilsList : branchOfficeUtilsList);
  };

  const resetAllCheck = () => {
    setList((prevList) => {
      return prevList.map(item => ({
        ...item,
        list: item.list.map(item1 => ({ ...item1, check: false })),
      }));
    });
  };

  useEffect(() => {
    mitt.on(initBottomUtilsMittKey, () => {
      initList();
    });

    return () => {
      mitt.off(initBottomUtilsMittKey);
    };
  }, [currentBranchOffice]);

  useEffect(() => {
    mitt.on(resetBottomCurrentIndexMittKey, () => {
      props.setBottomUtilsCurrentIndex(-1);
    });
    mitt.on(resetAllBottomUtilsCheckMittKey, () => {
      resetAllCheck();
    });
    mitt.on(deletePeoplePositionPointMittKey, () => {
    });

    return () => {
      mitt.off(resetBottomCurrentIndexMittKey);
      mitt.off(resetAllBottomUtilsCheckMittKey);
      mitt.off(deletePeoplePositionPointMittKey);
    };
  }, []);

  const optionsClick = (index) => {
    props.setBottomUtilsCurrentIndex(bottomUtilsCurrentIndex === index ? -1 : index);
  };

  const optionsItemsClick = (index, index1, item, item1) => {
    // 子选项点击处理
    setList((prevList) => {
      const updatedList = [...prevList];
      updatedList[index].list[index1].check = !updatedList[index].list[index1].check;
      return updatedList;
    });
  };

  const renderBranchOfficeUtils = () => {
    return (
      <div className="bottom_utils branch_office">
        {list.map((item, index) => {
          const isCurrentActive = bottomUtilsCurrentIndex === index;
          // const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
          // if (hasActiveChildren && !isCurrentActive) {
          //   return null;
          // }

          return (
            <div
              key={index}
              className="option"
              style={{ backgroundImage: `url(${isCurrentActive ? bg7 : bg8})` }}
              onClick={() => optionsClick(index)}
            >
              <div className="label">{item.label}</div>
              <CSSTransition
                timeout={500}
                classNames={{
                  enter: "animate__animated animate__faster",
                  enterActive: "animate__animated animate__faster animate__fadeInUp",
                  exit: "animate__animated animate__faster",
                  exitActive: "animate__animated animate__faster animate__fadeOutDown",
                }}
                unmountOnExit
                in={(isCurrentActive && item.list?.length > 0)}
              >
                <div className="items">
                  {item.list?.map((item1, index1) => (
                    <div
                      key={index1}
                      className={`item ${item1.check ? "active" : ""}`}
                      onClick={(e) => {
                        e.stopPropagation();
                        optionsItemsClick(index, index1, item, item1);
                      }}
                    >
                      <div className="child_label">{item1.label}</div>
                    </div>
                  ))}
                </div>
              </CSSTransition>
            </div>
          );
        })}
      </div>
    );
  };

  const renderPortUtils = () => {
    return (
      <div className="bottom_utils port">
        {list.map((item, index) => {
          const isCurrentActive = bottomUtilsCurrentIndex === index;
          const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
          if (hasActiveChildren && !isCurrentActive) {
            return null;
          }

          return (
            <div key={index} className="option" onClick={() => optionsClick(index)}>
              <img src={isCurrentActive ? item.checkImg : item.img} alt="" className="img" />
              <div
                className="label"
                style={{ backgroundImage: `url(${isCurrentActive ? titleOnImg : titleImg})` }}
              >
                {item.label}
              </div>
              {(isCurrentActive && item.list?.length > 0) && (
                <div className="items">
                  {item.list?.map((item1, index1) => (
                    <div
                      key={index1}
                      className="item"
                      onClick={(e) => {
                        e.stopPropagation();
                        optionsItemsClick(index, index1, item, item1);
                      }}
                    >
                      <img src={item1.check ? item1.checkImg : item1.img} alt="" className="child_img" />
                      <div className="child_label">{item1.label}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    );
  };

  const renderUtils = () => {
    if (pureMap || !currentPort)
      return (<div></div>);

    return (!currentBranchOffice ? renderPortUtils() : renderBranchOfficeUtils());
  };

  return (
    <div className="map_content_bottom_utils_container">
      {renderUtils()}
    </div>
  );
}

export default BottomUtils;