import React, { useState } from 'react';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { InputTextarea } from 'primereact/inputtextarea';

interface DeleteModalProps {
  visible: boolean;
  onHide: () => void;
  onConfirm: () => void;
  confirmLabel: string;
  cancelLabel: string;
  onCancel: () => void;
}

const DeleteModal: React.FC<DeleteModalProps> = ({
  visible,
  onHide,
  onConfirm,
  confirmLabel,
  cancelLabel,
  onCancel,
}) => {
  const [inputValue, setInputValue] = useState('');
  const deleteKeyword = 'DELETE';

  const isDeleteMatch = inputValue === deleteKeyword;

  const onCloseModal = () => {
    setInputValue('');
    onHide();
  }

  const onCancelModal = () => {
    setInputValue('');
    onCancel();
  }

  const onConfirmModal = () => {
    setInputValue('');
    onConfirm();
  }

  return (
    <Dialog
      closable
      visible={visible}
      onHide={onCloseModal}
      header={`Type 'DELETE' to confirm`}
      footer={
        <div>
          <Button
            label={confirmLabel}
            style={{ width: '5rem' }}
            onClick={onConfirmModal}
            disabled={!isDeleteMatch}
          />
          <Button
            label={cancelLabel}
            onClick={onCancelModal}
            style={{ width: '5rem' }}
            severity="danger"
          />
        </div>
      }
    >
      <InputTextarea
        style={{ marginTop: '30px' }}
        placeholder='DELETE'
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        rows={5}
        cols={50}
      />
    </Dialog>
  );
};

export default DeleteModal;
