import React from 'react';

// Utils
import { MESSAGES } from '../../../utils/message';

// UI Components
import Dialog from '../../../components/GenericUIBlocks/Dialog';
import Input from '../../../components/GenericUIBlocks/Input';

// Styles
import './styles.scss';


/**
 * EditTemplateNameModel Component
 * A modal for duplicating a template.
 *
 * @param {boolean} open - Boolean indicating whether the modal is open.
 * @param {Function} handleClose - Function to handle the closing of the modal.
 * @returns {JSX.Element} The duplicate template modal component.
 *
 */

interface EditTemplateNameModelProps {
  open: boolean;
  title: string,
  setTemplateTitle: any,
  handleEditName: any;
  templateTitle: string,
  handleClose: () => void;
}

const editDialogStyles = {
  maxWidth: '630px',
  minHeight: '210px',
};

const EditTemplateNameModel: React.FC<EditTemplateNameModelProps> = ({
  open,
  title,
  templateTitle,
  setTemplateTitle,
  handleEditName,
  handleClose,
}) => {
  return (
    <Dialog
      open={open}
      loading={false}
      handleClose={handleClose}
      title="Edit Template Name"
      cancelText={MESSAGES.TEMPLATE.SAVE.CANCEL_BUTTON}
      submitText="Save"
      customStyles={editDialogStyles}
      onSubmit={handleEditName}
      onCancel={handleClose}
    >
      <Input
        variant="input"
        type="text"
        label="Template Name"
        placeholder="Holidays"
        value={templateTitle}
        onChange={e => setTemplateTitle(e.target.value)}
      />
    </Dialog>
  );
};

export default EditTemplateNameModel;