import React, { useEffect, useState } from 'react';

// Hooks
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';
import { AppDispatch, RootState } from '../../redux/store';

// Actions
import {
  clearTemplateFields,
  loadFormDataToStore,
  downloadProof,
  envelopeProof,
  setPageCount,
} from '../../redux/actions/templateActions';
import { failure, success } from '../../redux/actions/snackbarActions';
import { searchAndAdvanceChange } from '../../redux/actions/templateActions';

// Components
import SaveTemplateModel from './SaveTemplateModel';
import ConfirmNavigateDialog from './ConfirmNavigateDialog';
import EditTemplateNameModel from './EditTemplateNameModel';

// Utils
import {
  changeColorOfBoxesForSnapPack,
  downloadPDF,
  extractFontFamilies,
  isValidQR,
  multiPageTemplates,
  removeBracketsFromRPL,
  validateEmoji,
  validateGSV,
} from '../../utils/template-builder';
import { addSafetyBordersToNonWindowProfessioanl } from '../../utils/templateSafetyBorders/professional';
import { addIdentifierAreaToProfessionalNonWindow } from '../../utils/templateIdentifierArea/professional';
import { getItem, setItem } from '../../utils/local-storage';
import { MESSAGES } from '../../utils/message';
// @ts-ignore
import fonts from '../../utils/fonts.json';

// UI Components
import Typography from '../GenericUIBlocks/Typography';
import Button from '../GenericUIBlocks/Button';
import CircularProgress from '../GenericUIBlocks/CircularProgress';
import { GridContainer, GridItem } from '../GenericUIBlocks/Grid';
import DuplicateTemplateModal from './DuplicateTemplateModal';
import GeneralTooltip from '../GenericUIBlocks/GeneralTooltip';

// Icons
// @ts-ignore
import EditIcon from '../../assets/images/templates/edit-pencil-icon.tsx';
// @ts-ignore
import DownloadIcon from '../../assets/images/modal-icons/order-download.tsx';
// @ts-ignore
import EnvelopeIcon from '../../assets/images/modal-icons/envelope-icon.tsx';
// @ts-ignore
import CloneIcon from '../../assets/images/modal-icons/template-copy.tsx';
// @ts-ignore
import AddIcon from '../../assets/images/modal-icons/add.tsx';
// @ts-ignore
import DeleteIcon from '../../assets/images/modal-icons/del.tsx';
// @ts-ignore
import DownloadIconV2 from '../../assets/images/templates/download-v2.svg';
// @ts-ignore
import CheckIconV2 from '../../assets/images/templates/check.svg';
// @ts-ignore
import EditIconV2 from '../../assets/images/templates/x.svg';
// @ts-ignore
import PencilIcon from '../../assets/images/templates/pencil.svg';

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

/**
 * Represents the top navigation bar of a template builder application.
 * Handles saving and navigation logic, as well as displaying a confirmation dialog for unsaved changes.
 *
 * @param {Object} props - The component props.
 * @param {Object} props.store - The store object used for saving the template.
 * @param {boolean} props.isStoreUpdated - Indicates whether the store has been updated.
 * @returns {JSX.Element} The top navigation bar component.
 */

const buttonStyles: React.CSSProperties = {
  maxWidth: '120px',
  minHeight: '40px',
  backgroundColor: '#fff',
  color: 'var(--text-color)',
  border: '0.5px solid var(--border-color)',
  fontSize: '15px',
  fontWeight: '500',
};

const progressStyles: React.CSSProperties = {
  width: '20px',
  height: '20px',
  border: '2px solid var(--primary-color)',
};

interface TopNavigationProps {
  store: any;
  createTemplateRoute?: string | null;
  isStoreUpdated: boolean;
  setIsDuplication: any;
  olcTemplate?: Record<string, any>;
  designerTemplateQuery?: Record<string, any> | null;
  allowedAddOns?: any;
  allowAdditionalPage?: boolean;
  currentTheme?: string | null | undefined;
  onDuplicateTemplate?: (payload: any) => Promise<any>;
  onReturnAndNavigate?: () => void;
  onSubmit?: (payload: any) => Promise<any>;
}

const TopNavigation: React.FC<TopNavigationProps> = ({
  store,
  createTemplateRoute,
  isStoreUpdated,
  setIsDuplication,
  olcTemplate,
  designerTemplateQuery,
  allowedAddOns,
  allowAdditionalPage,
  currentTheme,
  onDuplicateTemplate,
  onReturnAndNavigate,
  onSubmit,
}) => {
  const [showNavigateDialog, setShowNavigateDialog] = useState<boolean>(false);
  const [isShowModel, setIsShowModel] = useState<{
    open: boolean;
    model: string;
    loading: boolean;
    inputValue?: string;
  }>({
    open: false,
    model: '',
    loading: false,
    inputValue: '',
  });
  const [downloadingProof, setDownloaingProof] = useState<boolean>(false);
  const [downloadingEnvelope, setDownloaingEnvelope] = useState<boolean>(false);
  const [templateTitle, setTemplateTitle] = useState('');

  const { id } = useParams<{ id: string }>();

  const dispatch: AppDispatch = useDispatch();
  const navigate = useNavigate();

  const title = useSelector((state: RootState) => state.templates.title) || '';

  
  const product = useSelector(
    (state: RootState) => state.templates.product
  ) as Record<string, any>;
  const pageCount = useSelector(
    (state: RootState) => state.templates.pageCount
  );

  const dynamicFields = useSelector(
    (state: RootState) => state.templates.dynamicFields
  );
  const defaultFields = useSelector(
    (state: RootState) => state.templates.defaultDynamicFields
  );

  const defaultSenderFields = useSelector(
    (state: RootState) => state.templates.defaultSenderFields
  );

  const customFields = useSelector(
    (state: RootState) => state.customFields.customFields
  );

  const customFieldsV2 = useSelector(
    (state: RootState) => state.customFields.customFieldsV2
  ) as Record<string, any>;

  const defaultPropertyFields = useSelector(
    (state: RootState) => state.templates.defaultPropertyFields
  );

  const templateType = useSelector(
    (state: RootState) => state.templates.templateType
  );
  const envelopeType = useSelector(
    (state: RootState) => state.templates.envelopeType
  );

  const rosOfferPercentage = useSelector(
    (state: RootState) => state.templates.offerPercentage
  );

  const defaultMiscFields = useSelector(
    (state: RootState) => state.templates.defaultMiscFields
  );

  useEffect(() => {
    setTemplateTitle(title);
  }, [title]);

  useEffect(() => {
    if (!id) {
      const formData = getItem('formData');
      if (formData && !title) {
        dispatch(loadFormDataToStore(formData));
      } else {
        handleSaveFormData();
      }
    }
  }, [title]);

  // Update page count when store pages change
  useEffect(() => {
    if (store && store.pages) {
      dispatch(setPageCount(store.pages.length));
    }
  }, [store?.pages?.length]);

  const handleSaveFormData = () => {
    const data = { title, product, templateType, envelopeType };
    setItem('formData', JSON.stringify(data));
  };

  const handleBackPress = () => {
    if (isStoreUpdated) {
      setShowNavigateDialog(!showNavigateDialog);
    } else {
      handleNavigation(createTemplateRoute || '/create-template');
    }
  };

  const closeDuplicateModal = () => {
    setIsShowModel((prev) => ({
      ...prev,
      open: false,
      model: '',
      inputValue: '',
    }));
  };

  const handleNavigation = async (route = '/') => {
    handleClearFilters();
    if (
      templateType === 'json' &&
      product?.productType !== 'Real Penned Letter'
    ) {
      await store.history.clear();
    }
    onReturnAndNavigate ? onReturnAndNavigate() : navigate(route);
  };

  const handleClearFilters = () => dispatch(clearTemplateFields());

  const isProfessionalLetterNonWindow = () => {
    return (
      product?.id === '4' &&
      product?.productType === 'Professional Letters' &&
      (product?.windowed === false || product.isWindowedEnvelope === false)
    );
  };

  // Add a new page
  const handleAddPage = () => {
    if (store && store.pages.length < 2) {
      store.addPage();
      addSafetyBordersToNonWindowProfessioanl(store, 1);
      addIdentifierAreaToProfessionalNonWindow(store, 1);
      dispatch(setPageCount(store.pages.length));
    }
  };

  // Delete the second page
  const handleDeletePage = () => {
    if (store && store.pages.length > 1) {
      const pageToDelete = store.pages[1];
      store.deletePages([pageToDelete.id]);
      dispatch(setPageCount(store.pages.length));
    }
  };

  // Handle the duplication of the template
  const handleEditName = async () => {
    let errorText = '';
    if (!templateTitle) {
      errorText = MESSAGES.TEMPLATE.NAME_REQUIRED;
    } else if (templateTitle.length > 50) {
      errorText = MESSAGES.TEMPLATE.NAME_LESS_50;
    }
    if (errorText) {
      dispatch(failure(errorText));
      return;
    }
    dispatch(searchAndAdvanceChange('title', templateTitle.trim()));
    handleChangeModel()
  };

  const handleViewProofWithLamda = async () => {
    try {
      setDownloaingProof(true);
      let flattenedFieldsV2 = [];
      if (customFieldsV2.length > 0) {
        flattenedFieldsV2 = customFieldsV2?.flatMap(
          (section: { fields: any }) => section.fields
        );
      }
      const fields = [
        ...defaultFields,
        ...customFields,
        ...flattenedFieldsV2,
        ...Object.values(dynamicFields),
        ...defaultSenderFields,
        ...defaultPropertyFields,
        ...defaultMiscFields,
        {
          value: '{{ROS.PROPERTY_OFFER}}',
          key: '{{ROS.PROPERTY_OFFER}}',
          defaultValue: '$123,456.00',
        },
      ];
      let json = store.toJSON();
      const jsonSize = new Blob([JSON.stringify(json)]).size;
      if (jsonSize > 5242880) {
        dispatch(failure(MESSAGES.TEMPLATE.SIZE_LIMIT_EXCEED));
        return;
      }
      if (product?.productType === 'Real Penned Letter' && +product.id === 16) {
        const removedUnsupportedBrackets = removeBracketsFromRPL(json);
        json = removedUnsupportedBrackets;
        let clonedJson = JSON.stringify(json)
          .replace(/\(\(/g, '{{')
          .replace(/\)\)/g, '}}');
        json = JSON.parse(clonedJson);
      }
      if (product.productType === 'Snap Pack Mailers') {
        const updatedBoxes = changeColorOfBoxesForSnapPack(json);
        json = updatedBoxes;
      }
      let jsonString = JSON.stringify(json);
      fields.forEach(({ key, defaultValue, value }) => {
        const regex = new RegExp(key, 'g');
        jsonString = jsonString.replace(regex, defaultValue || value);
      });
      const jsonWithDummyData = JSON.parse(jsonString);
      const response: any = await downloadProof({
        json: jsonWithDummyData,
      });
      if (response.status === 200) {
        const binaryData = atob(response.data.data.base64);
        // Create a Uint8Array from the binary data
        const uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i);
        }

        // Create a Blob from the Uint8Array
        const blob = new Blob([uint8Array], { type: 'application/pdf' });

        // Create an Object URL for the Blob
        const url = URL.createObjectURL(blob);
        downloadPDF(title.substring(0, 20), url);
        dispatch(success('Mailer Proof generated successfully'));
      } else {
        dispatch(
          failure(
            response?.data?.message ||
            response?.message ||
            MESSAGES.DOWNLOAD_ERROR
          )
        );
      }
    } catch (error: any) {
      dispatch(
        failure(
          error?.response?.data?.message ||
          error?.message ||
          'Error while downloading proof'
        )
      );
    } finally {
      setDownloaingProof(false);
    }
  };

  const handleEnvelopeProof = async () => {
    try {
      setDownloaingEnvelope(true);
      const response: any = await envelopeProof({
        productId: product.id,
      });
      if (response.status === 200) {
        const binaryData = atob(response.data.data.base64);
        // Create a Uint8Array from the binary data
        const uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i);
        }

        // Create a Blob from the Uint8Array
        const blob = new Blob([uint8Array], { type: 'application/pdf' });

        // Create an Object URL for the Blob
        const url = URL.createObjectURL(blob);
        downloadPDF(title.substring(0, 20), url);
        dispatch(success('Download Envelope Proof generated successfully'));
      } else {
        dispatch(
          failure(
            response?.data?.message ||
            response?.message ||
            MESSAGES.DOWNLOAD_ERROR
          )
        );
      }
    } catch (error: any) {
      dispatch(
        failure(
          error?.response?.data?.message ||
          error?.message ||
          'Error while downloading envelope proof'
        )
      );
    } finally {
      setDownloaingEnvelope(false);
    }
  };

  const handleSave = async () => {
    try {
      const formData = new FormData();
      const allFields = [
        ...defaultFields,
        ...customFields,
        ...Object.values(dynamicFields),
        ...defaultSenderFields,
        ...defaultPropertyFields,
        ...defaultMiscFields,
      ];
      let selectedFields: any = [];
      if (templateType === 'json') {
        let jsonData = store.toJSON();

        const jsonSize = new Blob([JSON.stringify(jsonData)]).size;
        if (jsonSize > 5242880) {
          dispatch(failure(MESSAGES.TEMPLATE.SIZE_LIMIT_EXCEED));
          return;
        }

        const hasEmoji = validateEmoji(jsonData.pages);

        if (hasEmoji) {
          dispatch(failure(MESSAGES.TEMPLATE.EMOJI_NOT_ALLOWED));
          return;
        }

        if (
          product?.productType === 'Real Penned Letter' &&
          +product.id === 16
        ) {
          const removedUnsupportedBrackets = removeBracketsFromRPL(jsonData);
          jsonData = removedUnsupportedBrackets;
          let clonedJson = JSON.stringify(jsonData)
            .replace(/\(\(/g, '{{')
            .replace(/\)\)/g, '}}');
          jsonData = JSON.parse(clonedJson);
          await store.loadJSON(jsonData);
        }

        if (product.productType === 'Snap Pack Mailers') {
          const updatedBoxes = changeColorOfBoxesForSnapPack(jsonData);
          jsonData = updatedBoxes;
        }

        // get all fonts family from json
        const fontFamilies = extractFontFamilies(jsonData?.pages);

        // extract custom fonts and remove google fonts from that array
        const customFonts = fontFamilies.filter(
          (item: any) => !fonts.includes(item)
        );

        const availableBase64inJson = jsonData?.fonts?.map(
          (font: any) => font?.fontFamily
        );

        const unAvailableFonts = customFonts.filter(
          (item: any) => !availableBase64inJson?.includes(item)
        );

        if (unAvailableFonts?.length) {
          dispatch(
            failure(
              `Please upload ${unAvailableFonts[0]} font in My Fonts section.`
            )
          );
          return;
        }

        const isGsvValid = validateGSV(jsonData.pages);

        if (!isGsvValid) {
          dispatch(failure(MESSAGES.TEMPLATE.GSV_RESTRICT_ONE_PER_PAGE));
          return;
        }

        const hasEmptyQR = !isValidQR(jsonData.pages);

        if (hasEmptyQR) {
          dispatch(failure(MESSAGES.TEMPLATE.EMPTY_QR_NOT_ALLOWED));
          return;
        }

        setIsShowModel((prev) => ({ ...prev, loading: true }));

        const blob = await store.toBlob();

        if (multiPageTemplates.includes(product.productType)) {
          const backJsonData = { ...jsonData, pages: [jsonData.pages[1]] };
          await store.loadJSON(backJsonData);
          await store.waitLoading();
          const backBlob = await store.toBlob();
          formData.append('backThumbnail', backBlob, 'backLogo.png');
          store.loadJSON(jsonData);
        }

        const jsonString = JSON.stringify(jsonData);
        const blobData = new Blob([jsonString], { type: 'application/json' });
        formData.append('json', blobData, 'template.json');
        formData.append('thumbnail', blob, 'logo.png');
        selectedFields = allFields.filter((field) =>
          jsonString.includes(field.key)
        );
        if (
          (jsonString.includes('ros_') ||
            jsonString.includes('{{ROS.PROPERTY_OFFER}}')) &&
          rosOfferPercentage != null
        ) {
          formData.append('rosOfferPercentage', rosOfferPercentage);
        }
      }

      const additionalInfo = {
        hasAdditionalPage: pageCount > 1 && +product?.id === 4 ? true : false,
      };

      formData.append('additionalInfo', JSON.stringify(additionalInfo));
      formData.append('title', title);
      formData.append('productId', product?.id);
      selectedFields.length
        ? formData.append('fields', JSON.stringify(selectedFields))
        : undefined;
      envelopeType.length
        ? formData.append('envelopeType', envelopeType)
        : undefined;

      if (onSubmit) {
        const saveTemplate = await onSubmit(formData);
        if (saveTemplate) {
          // dispatch(success(olcTemplate ? 'Template Updated Successfully' : 'Template Created Successfully'));
          handleNavigation();
        }
      } else {
        dispatch(
          failure('Please add onSubmit handler via Props to save template')
        );
      }
    } catch (error) {
      return error;
    } finally {
      setIsShowModel((prev) => ({ ...prev, loading: false }));
    }
  };

  const handleChangeModel = (
    model: string = '',
    loading: string | null = null
  ) => {
    setIsShowModel((prev) => ({
      ...prev,
      open: !prev.open,
      loading: loading === 'false' ? false : prev.loading,
      model,
    }));
  };

  return (
    <>
      {currentTheme === 'v2' ? (
        <div className="v2-top-navigation-container">
          <GridContainer style={{ alignItems: 'center' }}>
            <GridItem lg={4} md={4} sm={12} xs={12}>
              <Typography className="create-template-title">
                Create a Template
              </Typography>
            </GridItem>
            <GridItem lg={4} md={3} sm={12} xs={12}>
              <div className="middle-v2">
                {isShowModel.open && isShowModel.model === 'edit-name-modal'  ? (
                  <div className="input-container">
                    <input
                      type="text"
                      value={templateTitle}
                      onChange={(e) => setTemplateTitle(e.target.value)}
                    />
                    <div className="icon-v2-container">
                      <img className="icon-v2" src={CheckIconV2} alt="check" onClick={() => {
                        handleEditName();
                      }} />
                      <img
                        src={EditIconV2}
                        alt="edit"
                        onClick={() => {
                          setTemplateTitle(title),
                          setIsShowModel((prev) => ({ ...prev, model:'', open: false }));
                        }}
                      />
                    </div>
                  </div>
                ) : (
                  <Typography>{title}</Typography>
                )}
                {isShowModel.model !== 'edit-name-modal' && (
                  <img
                    className="pencil-icon"
                    src={PencilIcon}
                    alt="pencil"
                    onClick={() => {
                      setIsShowModel((prev) => ({ ...prev, model:'edit-name-modal', open: true }));
                    }}
                  />
                )}
              </div>
            </GridItem>
            <GridItem lg={4} md={5} sm={12} xs={12}>
              <div className="actionsBtnWrapper right">
                {/* Page Management Controls - Only for Professional Letter Non-Window */}
                {isProfessionalLetterNonWindow() && allowAdditionalPage && (
                  <>
                    {pageCount === 1 && (
                      <div
                        className="add-page"
                        onClick={handleAddPage}
                        title="Add Page"
                      >
                        <AddIcon />
                      </div>
                    )}
                    {pageCount === 2 && (
                      <div
                        className="delete-page"
                        onClick={handleDeletePage}
                        title="Delete Page"
                      >
                        <DeleteIcon className="delete-icon" />
                      </div>
                    )}
                  </>
                )}
                {olcTemplate &&
                  !designerTemplateQuery &&
                  onDuplicateTemplate && (
                    <div
                      className="clone"
                      onClick={() =>
                        setIsShowModel((prev) => ({
                          ...prev,
                          open: true,
                          model: 'duplicate',
                          inputValue: '',
                        }))
                      }
                    >
                      <CloneIcon fill="#545454" />
                    </div>
                  )}
                <GeneralTooltip
                  title={MESSAGES.TEMPLATE.DUPLICATE_MODAL.TITLE}
                  place="bottom"
                  anchorSelect=".clone"
                />
                <GeneralTooltip
                  title="Add Page"
                  place="bottom"
                  anchorSelect=".add-page"
                />
                <GeneralTooltip
                  title="Delete Page"
                  place="bottom"
                  anchorSelect=".delete-page"
                />
                {/* {product?.hasEnvelope && (
              <>
                <div
                  className="download-envelope"
                  onClick={handleEnvelopeProof}
                >
                  {downloadingEnvelope ? (
                    <CircularProgress style={progressStyles} />
                  ) : (
                    <EnvelopeIcon />
                  )}
                </div>
                <GeneralTooltip
                  title={MESSAGES.TEMPLATE.DOWNLOAD_ENVELOPE_BUTTON}
                  place="bottom"
                  anchorSelect=".download-envelope"
                />
              </>
            )} */}
                <div className="download" onClick={handleViewProofWithLamda}>
                  {downloadingProof ? (
                    <CircularProgress style={progressStyles} />
                  ) : (
                    <img src={DownloadIconV2} alt="download" />
                  )}
                </div>
                <GeneralTooltip
                  title={MESSAGES.TEMPLATE.DOWNLOAD_PROOF_BUTTON}
                  place="bottom"
                  anchorSelect=".download"
                />
                <Button
                  style={{
                    ...buttonStyles,
                    border: 'none',
                    backgroundColor: 'var(--primary-color)',
                    color: '#fff',
                    fontSize: '14px',
                    fontWeight: '600',
                    borderRadius: '4px',
                    maxWidth: '140px',
                    height: '44px',
                  }}
                  onClick={() => handleChangeModel('save')}
                >
                  {MESSAGES.TEMPLATE.SUBMIT_BUTTON}
                </Button>
                <Button
                  style={{
                    ...buttonStyles,
                    border: '0.5px solid #0000003D',
                    color: 'var(--text-color)',
                    fontSize: '14px',
                    fontWeight: '600',
                    borderRadius: '4px',
                    maxWidth: '141px',
                    height: '45px',
                  }}
                  onClick={() => handleBackPress()}
                >
                  {MESSAGES.TEMPLATE.CANCEL_BUTTON}
                </Button>
              </div>
            </GridItem>
          </GridContainer>
        </div>
      ) : (
        <div className="top-navigation-container">
          <GridContainer style={{ alignItems: 'center' }}>
            <GridItem lg={4} md={4} sm={0} xs={0}></GridItem>
            <GridItem lg={3} md={2} sm={2} xs={12}>
              <div className="middle">
                <Typography>{title}</Typography>
                <div onClick={() => handleChangeModel('edit')}>
                  <EditIcon fill="var(--text-color)" />
                </div>
              </div>
            </GridItem>
            <GridItem lg={5} md={6} sm={9} xs={12}>
              <div className="actionsBtnWrapper right">
                {/* Page Management Controls - Only for Professional Letter Non-Window */}
                {isProfessionalLetterNonWindow() && allowAdditionalPage && (
                  <>
                    {pageCount === 1 && (
                      <div
                        className="add-page"
                        onClick={handleAddPage}
                        title="Add Page"
                      >
                        <AddIcon />
                      </div>
                    )}
                    {pageCount === 2 && (
                      <div
                        className="delete-page"
                        onClick={handleDeletePage}
                        title="Delete Page"
                      >
                        <DeleteIcon className="delete-icon" />
                      </div>
                    )}
                  </>
                )}
                {olcTemplate &&
                  !designerTemplateQuery &&
                  onDuplicateTemplate && (
                    <div
                      className="clone"
                      onClick={() =>
                        setIsShowModel((prev) => ({
                          ...prev,
                          open: true,
                          model: 'duplicate',
                          inputValue: '',
                        }))
                      }
                    >
                      <CloneIcon fill="#545454" />
                    </div>
                  )}
                <GeneralTooltip
                  title={MESSAGES.TEMPLATE.DUPLICATE_MODAL.TITLE}
                  place="bottom"
                  anchorSelect=".clone"
                />
                <GeneralTooltip
                  title="Add Page"
                  place="bottom"
                  anchorSelect=".add-page"
                />
                <GeneralTooltip
                  title="Delete Page"
                  place="bottom"
                  anchorSelect=".delete-page"
                />
                {/* {product?.hasEnvelope && (
              <>
                <div
                  className="download-envelope"
                  onClick={handleEnvelopeProof}
                >
                  {downloadingEnvelope ? (
                    <CircularProgress style={progressStyles} />
                  ) : (
                    <EnvelopeIcon />
                  )}
                </div>
                <GeneralTooltip
                  title={MESSAGES.TEMPLATE.DOWNLOAD_ENVELOPE_BUTTON}
                  place="bottom"
                  anchorSelect=".download-envelope"
                />
              </>
            )} */}
                <div className="download" onClick={handleViewProofWithLamda}>
                  {downloadingProof ? (
                    <CircularProgress style={progressStyles} />
                  ) : (
                    <DownloadIcon />
                  )}
                </div>
                <GeneralTooltip
                  title={MESSAGES.TEMPLATE.DOWNLOAD_PROOF_BUTTON}
                  place="bottom"
                  anchorSelect=".download"
                />
                <Button
                  style={{
                    ...buttonStyles,
                    border: '0.5px solid var(--primary-color)',
                    color: 'var(--primary-color)',
                  }}
                  onClick={() => handleBackPress()}
                >
                  {MESSAGES.TEMPLATE.CANCEL_BUTTON}
                </Button>
                <Button
                  style={{
                    ...buttonStyles,
                    border: 'none',
                    backgroundColor: 'var(--primary-color)',
                    color: '#fff',
                  }}
                  onClick={() => handleChangeModel('save')}
                >
                  {MESSAGES.TEMPLATE.SUBMIT_BUTTON}
                </Button>
              </div>
            </GridItem>
          </GridContainer>
        </div>
      )}

      {showNavigateDialog && (
        <ConfirmNavigateDialog
          open={showNavigateDialog}
          handleClose={() => setShowNavigateDialog(false)}
          handleNavigateAction={() =>
            handleNavigation(createTemplateRoute || '/create-template')
          }
          currentTheme={currentTheme}
        />
      )}
      {isShowModel?.open && isShowModel?.model === 'edit' && (
        <EditTemplateNameModel
          open={isShowModel?.open}
          title={title}
          templateTitle={templateTitle}
          setTemplateTitle={setTemplateTitle}
          handleEditName={handleEditName}
          handleClose={() => handleChangeModel()}
        />
      )}
      {isShowModel.open && isShowModel.model === 'save' && (
        <SaveTemplateModel
          loading={isShowModel.loading}
          open={isShowModel.open}
          handleClose={() => handleChangeModel()}
          handleSave={handleSave}
          store={store}
          allowedAddOns={allowedAddOns}
          currentTheme={currentTheme}
        />
      )}
      {/* Duplicate Template Modal */}
      <DuplicateTemplateModal
        open={isShowModel.open && isShowModel.model === 'duplicate'}
        value={isShowModel.inputValue || ''}
        onChange={(val) =>
          setIsShowModel((prev) => ({
            ...prev,
            inputValue: val,
          }))
        }
        error=""
        title={MESSAGES.TEMPLATE.DUPLICATE_MODAL.TITLE}
        submitButtonText={MESSAGES.TEMPLATE.DUPLICATE_MODAL.SUBMIT_BUTTON}
        onCancel={closeDuplicateModal}
        onDuplicateTemplate={onDuplicateTemplate}
        setIsDuplication={setIsDuplication}
        icon={<CloneIcon fill="var(--primary-color)" />}
      />
    </>
  );
};

export default TopNavigation;