import { useContext } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import backImg1 from "~/assets/images/map_bi/back1.png";
import backImg2 from "~/assets/images/map_bi/back2.png";
import guangImg from "~/assets/images/map_bi/guang.png";
import topImg1 from "~/assets/images/map_bi/top1.png";
import topImg2 from "~/assets/images/map_bi/top2.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  changeBottomUtilsAnimationMittKey,
  changeContentAnimationKeyMittKey,
  changePeopleTrajectorySelectVisibleMittKey,
  clickBackMittKey,
  clickBranchOfficePointMittKey,
  clickPortPointMittKey,
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import "./index.less";

function Header(props) {
  const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);

  const onBack = () => {
    sessionStorage.removeItem("mapCurrentBranchOfficeId");
    mitt.emit(deletePeoplePositionPointMittKey);
    if (currentPort !== "00003" && currentBranchOffice) {
      mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
      mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
      mapMethods.current.removeWall();
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.flyTo();
      mapMethods.current.addPortPoint();
    }
    else if (currentBranchOffice) {
      mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.returnPreviousCenterPoint();
      setTimeout(() => {
        mapMethods.current.addBranchOfficePoint(area);
      }, 2000);
    }
    else if (currentPort) {
      mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
      mapMethods.current.removeWall();
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.flyTo();
      mapMethods.current.addPortPoint();
    }
    mitt.emit(changeBottomUtilsAnimationMittKey);
    mitt.emit(resetBottomCurrentIndexMittKey);
    mitt.emit(resetAllBottomUtilsCheckMittKey);
    mitt.emit(clickBackMittKey);
    mitt.emit(changeContentAnimationKeyMittKey);
    mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
  };

  return (
    <div className="map_content_header_container">
      <SwitchTransition>
        <CSSTransition
          timeout={1000}
          classNames={{
            enter: "animate__animated",
            enterActive: "animate__animated animate__fadeInDown",
            exit: "animate__animated",
            exitActive: "animate__animated animate__fadeOutUp",
          }}
          unmountOnExit
          key={currentBranchOffice || 1}
        >
          <header
            className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
            style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
          >
            {(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
              <div
                style={{ backgroundImage: `url(${backImg1})` }}
                className="back"
                onClick={onBack}
              />
            )}
            {props.headerTitle !== "秦港股份安全监管平台" && (
              <div className="back" onClick={onBack}>
                <img src={backImg2} alt="" />
                <div>返回</div>
              </div>
            )}
            <div className="title">{props.headerTitle}</div>
            <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
          </header>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

export default Header;