import React, { FC } from "react";
import { Modal, Text } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { getSpoolName } from "../../helpers/spoolHelpers";
import { useStoreState } from "../../store";

interface IDeleteSpoolModalProps {
  handleCancel: () => any;
  handleDelete: (id: string) => void;
  id: string;
  isOpen: boolean;
}

export const DeleteSpoolModal: FC<IDeleteSpoolModalProps> = ({
  handleCancel,
  handleDelete,
  id,
  isOpen,
}) => {
  const { spools } = useStoreState(
    (state) => state.projectDetails.projectDetails
  );
  //ToDo check and clear
  return (
    <Modal
      title={t(dictionary.confirmDelete)}
      // labelClose={t(dictionary.cancel)}
      // labelConfirm={t(dictionary.delete)}
      handleClose={handleCancel}
      handleConfirm={() => handleDelete(id)}
      isOpen={isOpen}
      exitOnEsc={true}
      labels={{
        primary: t(dictionary.delete),
        secondary: t(dictionary.cancel),
      }}
    >
      <Text>{getSpoolName(id, spools)}</Text>
      <Text>{t(dictionary.doYouWantDeleteSpool)}</Text>
    </Modal>
  );
};