import React, { FC } from "react";
import { DeleteModal, DeleteSectionModal, DeleteSpoolInstance } from "../Modals";
import { SiteProps } from "./Section";
import { getItemName, getSpoolName } from "./sectionModel";
import { useStoreState } from "../../store";

interface ISectionModalsProps {
  siteProps: SiteProps;
  hideDeleteModal: () => void;
  hideDeleteSectionModal: () => void;
  hideSpoolDeleteModal: () => void;
  deleteElement: (
    id: string,
    isMapElement: boolean,
    isReference: boolean
  ) => void;
  deleteSection: (id: string) => void;
  deleteSpool: (id: string) => void;
}

export const SectionModals: FC<ISectionModalsProps> = ({
  siteProps,
  hideDeleteModal,
  hideDeleteSectionModal,
  hideSpoolDeleteModal,
  deleteElement,
  deleteSection,
  deleteSpool,
}) => {
  const { elements ,spools} = useStoreState(
    (state) => state.projectDetails.projectDetails
  );
  return (
    <>
      {siteProps.delete.show && (
        <DeleteModal
          handleCancel={hideDeleteModal}
          handleDelete={deleteElement}
          id={siteProps.delete.id}
          type={siteProps.details.type}
          name={getItemName(elements, siteProps.delete.id)}
          isOpen={siteProps.delete.show}
        />
      )}

      {siteProps.deleteSection.show && (
        <DeleteSectionModal
          handleCancel={hideDeleteSectionModal}
          handleDelete={deleteSection}
          id={siteProps.deleteSection.id}
          name={siteProps.name}
          isOpen={siteProps.deleteSection.show}
        />
      )}
      {siteProps.spoolDelete.show && (
        <DeleteSpoolInstance
          handleCancel={hideSpoolDeleteModal}
          handleDelete={deleteSpool}
          id={siteProps.spoolDelete.spoolID}
          name={getSpoolName(spools, siteProps.spoolDelete.spoolID)}
          isOpen={siteProps.spoolDelete.show}
        />
      )}
    </>
  );
};