Untitled

import { DraggableModal } from 'ant-design-draggable-modal';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Col, Modal, Space, Tooltip } from 'antd';
import ReactivateIncident from 'features/ReactivateEmergencyWidget';
import { ReactivateIcon } from 'components/icons';
import './index.scss';


export default function EmergencyTools({ selectedEmergency, type }) {
  const [modalsOpen, setModalsOpen] = useState({});
  const { t } = useTranslation('translations');

  const toggleModal = useCallback((key) => {
    setModalsOpen((prev) => ({ ...prev, [key]: !prev[key] }));
  }, []);

  const closeModal = useCallback((key) => {
    setModalsOpen((prev) => ({ ...prev, [key]: false }));
  }, []);

  const dataOptions = [
    {
      id: 'reactivate_incident',
      title: t('ractivate_incident.title'),
      Icon: ReactivateIcon,
      modalContent: (
        <ReactivateIncident emergencyId={selectedEmergency} onClose={() => closeModal('reactivate_incident')} />
      ),
      modalKey: 'reactivate_incident'
    }
  ];

  return (
    <>
      <Space size={30} direction="vertical" className="emergency__tools">
        {dataOptions.map(({ id, title, Icon, modalKey }) => (
          <Col key={id} span={1}>
            <Tooltip title={title} placement="right">
              <div onClick={() => toggleModal(modalKey)}>
                <Icon width="30px" height="30px" />
              </div>
            </Tooltip>
          </Col>
        ))}
      </Space>

      {dataOptions.map(({ id, modalContent, modalKey }) => (
        <DraggableModal
          key={id}
          className="cadlite-modal modal__emergency__tools"
          zIndex={1002}
          footer={false}
          open={!!modalsOpen[modalKey]}
          closable={true}
          onCancel={() => closeModal(modalKey)}
          destroyOnClose={true}
        >
          {modalContent}
        </DraggableModal>
      ))}
    </>
  );
}