import { Button, Modal } from "antd";
import { useContext } from "react";
import { Context } from "~/pages/Container/Map/js/context";
import AlarmEquipment from "./AlarmEquipment";
import FireControlRoom from "./FireControlRoom";
import FirePointLocation from "./FirePointLocation";
import FirePumpRoom from "./FirePumpRoom";
import FireRescueTeam from "./FireRescueTeam";
import FireWaterSource from "./FireWaterSource";
import MeteorologicalMonitoring from "./MeteorologicalMonitoring";

const CustomModal = () => {
  const { modalVisible, modalData, actions } = useContext(Context);

  const renderContent = () => {
    return {
      meteorologicalMonitoring: <MeteorologicalMonitoring />, // 气象监测
      fireRescueTeam: <FireRescueTeam id={modalData.id} />, // 消防救援队
      fireControlRoom: <FireControlRoom id={modalData.id} />, // 消防控制室
      firePumpRoom: <FirePumpRoom id={modalData.id} />, // 消防泵房
      fireWaterSource: <FireWaterSource id={modalData.id} />, // 消防水源
      firePointLocation: <FirePointLocation id={modalData.id} />, // 消防点位
      alarmEquipment: <AlarmEquipment id={modalData.id} />, // 报警设备
    }[modalData.markType?.replace("标记点_", "")];
  };

  return (
    <Modal
      open={modalVisible}
      mask={{ closable: false }}
      footer={[
        <Button key="cancel" onClick={() => actions.resetMark()}>取消</Button>,
      ]}
      width={1500}
      onCancel={() => {
        actions.resetMark();
      }}
      title={modalData.title || ""}
      classNames={{ root: "map_bi_model" }}
    >
      <div key={modalData.id}>
        {renderContent()}
      </div>
    </Modal>
  );
};

export default CustomModal;