import React from "react";

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

// Components
import Dialog from '../../GenericUIBlocks/Dialog';
import DialogV2 from '../../GenericUIBlocks/Dialog/V2';

// images
import ModalCross from '../../../assets/images/modal-icons/modal-cross';
import ConfirmCloseIcon from '../../../assets/images/modal-icons/confirm-close-icon';

// Styles
import "./styles.scss";

/**
 * ConfirmNavigateDialog 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.
 *
 */

const cancelDialogStyles = {
  maxWidth: '407px',
  minHeight: '258px',
};

const cancelDialogStylesV2 = {
  maxWidth: '567px',
  minHeight: '303px',
  padding: '40px',
};

// Define the props type
interface ConfirmNavigateDialogProps {
  open: boolean;
  currentTheme?: string | null | undefined;
  handleClose: () => void;
  handleNavigateAction: () => void;
}


const ConfirmNavigateDialog: React.FC<ConfirmNavigateDialogProps> = ({ open, currentTheme, handleClose, handleNavigateAction }) => {
  return (
    currentTheme === 'v2' ?
      <DialogV2
        icon={<ConfirmCloseIcon fill='var(--primary-color)' />}
        customStyles={cancelDialogStylesV2}
        open={open}
        handleClose={handleClose}
        title='Confirm Cancel'
        subHeading=''
        description='Are you sure you want to cancel creating this template? All unsaved changes will be lost.'
        onSubmit={handleNavigateAction}
        onCancel={handleClose}
        cancelText='No'
        submitText='Yes'
        isGallery={false}
      /> :
      <Dialog
        icon={<ModalCross />}
        customStyles={cancelDialogStyles}
        open={open}
        handleClose={handleClose}
        title={MESSAGES.TEMPLATE.CANCEL.TITLE}
        subHeading={MESSAGES.TEMPLATE.CANCEL.HEADING}
        description={MESSAGES.TEMPLATE.CANCEL.PARAGRAPH}
        onSubmit={handleNavigateAction}
        onCancel={handleClose}
        cancelText={MESSAGES.TEMPLATE.CANCEL.BACK_BUTTON}
        submitText={MESSAGES.TEMPLATE.CANCEL.CANCEL_BUTTON}
      />

  );
};

export default ConfirmNavigateDialog;