import { Form, Empty } from 'antd';
import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi';
import { FaPlus } from 'react-icons/fa6';
import { InputField } from '../../Components/Forms/InputField.jsx';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
import Buttons from '../../Components/Forms/Buttons';
import { validateSafeInput } from '../../Services/Others';
import { useEffect } from 'react';

const StickerPrintModel = ({
  open,
  handleCancel,
  formRef,
  onFinish,
  MultiCode,
  activeTab,
  setActiveTab,
  selectedRecords,
  coresdata,
  dropdownValue,
  CoresOnChange,
  barcodeTemplateDetails,
  detail,
  proName,
  nickName,
  ProdId,
  size,
  CopiesOnChange,
  printProductName,
  totalCopies,
  setstockWiseQrcode,
  setProductWiseQrcode,
  setNickName,
  templateOptions,
}) => {
  const secondValueStyle = {
    flexDirection: templateOptions.secondValue === 'R' ? 'row' : 'row-reverse',
  };
  const valueStyleRow = {
    flexDirection: templateOptions.value === 'R' ? 'row' : 'row-reverse',
  };
  const valueStyleColumn = {
    flexDirection: templateOptions.value === 'T' ? 'column' : 'column-reverse',
  };
  const barCodeImage =
    'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png';
  const qrCodeImage =
    'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png';
  const previewText = 'Barcode Preview';
  const formatDate = (dateStr) => {
    const d = new Date(dateStr);

    const day = String(d.getDate()).padStart(2, '0');

    const months = [
      'JAN',
      'FEB',
      'MAR',
      'APR',
      'MAY',
      'JUN',
      'JUL',
      'AUG',
      'SEP',
      'OCT',
      'NOV',
      'DEC',
    ];
    const month = months[d.getMonth()];

    const year = String(d.getFullYear()).slice(-2);

    return `${day}-${month}-${year}`;
  };
  const colorText = 'Color : Red';
  const handleImageTag = (w, h = '40px', barcodeOrQr) => {
    return (
      <img
        src={barcodeOrQr ? barCodeImage : qrCodeImage}
        alt={previewText}
        width={w}
        height={h}
      />
    );
  };
  useEffect(() => {
    if (coresdata?.length > 0 && open) {
      CoresOnChange(coresdata?.[0].ConfigName);
    }
  }, [open, coresdata]);
  return (
    <DefaultModal
      width={1000}
      open={open}
      title="Sticker Print"
      handleCancel={handleCancel}
      footer={false}
      children={
        <Form ref={formRef} onFinish={onFinish}>
          {MultiCode && (
            <div className="printtabs">
              <div
                className={`tab-item ${activeTab === 'stock' ? 'active' : ''}`}
                onClick={() => setActiveTab('stock')}
              >
                Stock Wise{' '}
                <span className="count">({selectedRecords?.length})</span>
                <div>
                  <div
                    className="AddStockMinatain"
                    onClick={(e) => {
                      e.stopPropagation();
                      setstockWiseQrcode(true);
                    }}
                    style={{
                      animation:
                        activeTab === 'stock' ? 'blink 1s infinite' : 'none',
                    }}
                  >
                    <FaPlus /> Add
                  </div>
                </div>
              </div>

              <div
                className={`tab-item ${activeTab === 'product' ? 'active' : ''}`}
                onClick={() => setActiveTab('product')}
              >
                Product Wise{' '}
                <span className="count">({selectedRecords?.length})</span>
                <div
                  className="AddStockMinatain"
                  onClick={(e) => {
                    e.stopPropagation();
                    setProductWiseQrcode(true);
                  }}
                  style={{
                    animation:
                      activeTab === 'product' ? 'blink 1s infinite' : 'none',
                  }}
                >
                  <FaPlus /> Add
                </div>
              </div>
            </div>
          )}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
            <Form.Item
              name="Cross"
              className="size-selection"
              rules={[
                {
                  required: true,
                  message: 'Please Select Cross',
                },
              ]}
            >
              <div>
                <label
                  className="required"
                  style={{ marginBottom: '8px', display: 'block' }}
                >
                  Cross
                </label>
                <div className="barcode-qr-preview">
                  <div className="radio-sidebar-container">
                    {coresdata?.map((option) => (
                      <div
                        key={option.ConfigName}
                        onClick={() => CoresOnChange(option.ConfigName)}
                        className={`radio-sidebar-item ${dropdownValue === option.ConfigName ? 'selected' : ''}`}
                      >
                        <div className="radio-sidebar-title">
                          {option.ConfigName}
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="BarcodeTemplateSetup-Master">
                    <div
                      className={`CustomisedBSPS ${dropdownValue === '100X150' ? 'height-max' : ''}`}
                    >
                      <div className="headerPreview">PREVIEW</div>
                      {(() => {
                        const template = barcodeTemplateDetails?.find(
                          (find) => find.SessionName === dropdownValue
                        );
                        const templateAvailable =
                          template === undefined ? false : true;
                        const checkComponent = (name) =>
                          template?.OptionDetails?.some(
                            (some) => some.OptionName === name
                          );

                        const mrp = checkComponent('MRP');
                        const qrcode = checkComponent('Qrcode');
                        const barcode = checkComponent('Barcode');
                        const color = checkComponent('Color');
                        const eDate = checkComponent('E Date');
                        const mDate = checkComponent('M Date');
                        const sellingPrice = checkComponent('Selling Price');
                        const productName = checkComponent('Product Name');
                        const barcodeOrQr = template?.CodeType
                          ? template?.CodeType === 'B'
                          : true;
                        const templateValue =
                          template?.Position !== '' ? template?.Position : '';
                        switch (dropdownValue) {
                          case '15X15 6cross':
                            return templateAvailable ? (
                              !(productName || barcode || qrcode || mrp) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div className="SixCross15x">
                                    {[...Array(6)].map((_, index) => (
                                      <div key={index} className="BarQrprint5">
                                        <div className="BarQrprint1details BarQrprint5Details alignCenterFlexDirectionColumn">
                                          {(barcode || qrcode) &&
                                            templateValue === 'T' &&
                                            handleImageTag(
                                              barcodeOrQr ? 50 : 20,
                                              20,
                                              barcodeOrQr
                                            )}
                                          {productName && (
                                            <div
                                              className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                            >
                                              {nickName
                                                ? nickName
                                                : proName
                                                  ? proName
                                                  : 'Product Name'}
                                            </div>
                                          )}
                                          {(barcode || qrcode) &&
                                            templateValue === 'C' &&
                                            handleImageTag(
                                              barcodeOrQr ? 50 : 20,
                                              20,
                                              barcodeOrQr
                                            )}
                                          {mrp && (
                                            <div className="MRPBQ">
                                              {'₹:' +
                                                (detail?.MRP
                                                  ? detail?.MRP
                                                  : 0.0)}
                                            </div>
                                          )}
                                          {(barcode || qrcode) &&
                                            templateValue === 'B' &&
                                            handleImageTag(
                                              barcodeOrQr ? 50 : 20,
                                              20,
                                              barcodeOrQr
                                            )}
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'15mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'15mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="default-15x15-6cross">
                                  {Array.from({ length: 6 }).map((_, index) => (
                                    <div
                                      className="Sticker0"
                                      key={`sticker0-${index}`}
                                    >
                                      <img
                                        src={qrCodeImage}
                                        alt={`QR Code ${index + 1}`}
                                      />
                                    </div>
                                  ))}
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'15mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'15mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '22X35 3cross':
                            return templateAvailable ? (
                              !(barcode || qrcode || mrp) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div className="Cross32235">
                                    {[...Array(3)].map((_, index) => (
                                      <div className="BarQrprint4" key={index}>
                                        <div
                                          className="BarQrprint1details"
                                          style={{
                                            alignItems: 'center',
                                            flexDirection:
                                              templateValue === 'T'
                                                ? 'column'
                                                : 'column-reverse',
                                          }}
                                        >
                                          {(barcode || qrcode) &&
                                            handleImageTag(
                                              barcodeOrQr ? 100 : 35,
                                              35,
                                              barcodeOrQr
                                            )}
                                          {(productName || mrp) && (
                                            <div
                                              style={{
                                                textAlign: 'center',
                                                width: '100%',
                                                display: 'flex',
                                                alignItems: 'center',
                                                justifyContent: 'center',
                                                flexDirection: 'column',
                                              }}
                                            >
                                              {productName && (
                                                <div
                                                  className={`MRPBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                                >
                                                  {nickName
                                                    ? nickName
                                                    : proName || 'Product Name'}
                                                </div>
                                              )}
                                              {mrp && (
                                                <div className="MRPBQ">
                                                  {'₹:' +
                                                    (detail?.MRP
                                                      ? detail?.MRP
                                                      : 10.0)}
                                                </div>
                                              )}
                                            </div>
                                          )}
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'22mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'35mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid22x35_3cross">
                                  {Array?.from({ length: 3 })?.map(
                                    (_, index) => (
                                      <div
                                        className="Sticker1 bg-white"
                                        key={`sticker1-${index}`}
                                      >
                                        <div style={{ width: '60%' }}>
                                          <p
                                            className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
                                          >
                                            {proName || 'Product Name'} (
                                            {size || '1 PCS'})
                                          </p>
                                          <p>{ProdId || 'QR579890770'}</p>
                                        </div>
                                        <img
                                          src={qrCodeImage}
                                          style={{
                                            width: '12mm',
                                            height: '12mm',
                                          }}
                                        />
                                      </div>
                                    )
                                  )}
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'22mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'35mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '25X25 4cross':
                            return templateAvailable ? (
                              !(
                                productName ||
                                mDate ||
                                eDate ||
                                barcode ||
                                qrcode ||
                                mrp
                              ) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div className="Cross4Print">
                                    {[...Array(4)].map((_, index) => (
                                      <div key={index} className="BarQrprint3">
                                        <div className="BarQrprint1details alignCenterFlexDirectionColumn">
                                          {(barcode || qrcode) &&
                                            templateValue === 'T' &&
                                            handleImageTag(
                                              barcodeOrQr ? 60 : 35,
                                              35,
                                              barcodeOrQr
                                            )}
                                          {productName && (
                                            <div
                                              className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                            >
                                              {nickName
                                                ? nickName
                                                : proName
                                                  ? proName
                                                  : 'Product Name'}
                                            </div>
                                          )}
                                          {mrp && (
                                            <div className="MRPBQ">
                                              {'₹:' +
                                                (detail?.MRP
                                                  ? detail?.MRP
                                                  : 10.0)}
                                            </div>
                                          )}
                                          {(barcode || qrcode) &&
                                            templateValue === 'C' &&
                                            handleImageTag(
                                              barcodeOrQr ? 60 : 35,
                                              35,
                                              barcodeOrQr
                                            )}
                                          {mDate && (
                                            <div className="MandateBQ"></div>
                                          )}
                                          {eDate && (
                                            <div className="ExpdateBQ">
                                              DD-MM-YYYY
                                            </div>
                                          )}
                                          {(barcode || qrcode) &&
                                            templateValue === 'B' &&
                                            handleImageTag(
                                              barcodeOrQr ? 60 : 35,
                                              35,
                                              barcodeOrQr
                                            )}
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid25x25_4cross dummy4cross">
                                  {Array.from({ length: 4 })?.map(
                                    (_, index) => (
                                      <div
                                        className="sticker25x25 bg-white"
                                        key={`sticker2-${index}`}
                                      >
                                        <p
                                          className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          <span
                                            className={
                                              (proName + '(' + size + ')')
                                                ?.length <= 14
                                                ? 'product-name2'
                                                : 'product-nameSmall2'
                                            }
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </span>
                                          <span
                                            className={
                                              (proName + '(' + size + ')')
                                                ?.length <= 14
                                                ? 'product-size2'
                                                : 'product-sizeSmall2'
                                            }
                                          >
                                            ({size || '1 PCS'})
                                          </span>
                                        </p>
                                        <div
                                          style={{
                                            display: 'flex',
                                            alignItems: 'center',
                                            width: '100%',
                                            flexDirection: 'column',
                                            justifyContent: 'center',
                                          }}
                                        >
                                          <img
                                            src={qrCodeImage}
                                            className="sticker25-img"
                                            alt="barcode"
                                          />
                                          <p className="product-id2">
                                            {ProdId || 'QR8575956'}
                                          </p>
                                        </div>
                                      </div>
                                    )
                                  )}
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'25mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'25mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '25X50 2cross':
                            return templateAvailable ? (
                              !(productName || barcode || qrcode || mrp) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div className="TwoCrosssmain">
                                    {[...Array(2)].map((_, index) => (
                                      <div key={index} className="BarQrprint8">
                                        <div
                                          className="Barcodeimage"
                                          style={valueStyleColumn}
                                        >
                                          {(barcode || qrcode) &&
                                            handleImageTag(
                                              barcodeOrQr ? 140 : 30,
                                              30,
                                              barcodeOrQr
                                            )}
                                          {productName && (
                                            <div
                                              className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                            >
                                              {nickName
                                                ? nickName
                                                : proName
                                                  ? proName
                                                  : 'Product Name'}
                                            </div>
                                          )}
                                          {mrp && (
                                            <div className="MRPBQ">
                                              {'₹:' +
                                                (detail?.MRP
                                                  ? detail?.MRP
                                                  : 10.0)}
                                            </div>
                                          )}
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'50mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid25x50_2cross">
                                  {Array.from({ length: 2 })?.map(
                                    (_, index) => (
                                      <div
                                        className="Sticker3 bg-white"
                                        key={`sticker3-${index}`}
                                      >
                                        <div style={{ width: '60%' }}>
                                          <p
                                            className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {proName || 'Product Name'} (
                                            {size || '1 PCS'})
                                          </p>
                                          <p>{ProdId || 'QR74478578'}</p>
                                        </div>
                                        <img
                                          src={qrCodeImage}
                                          style={{
                                            width: '75px',
                                            height: '75px',
                                          }}
                                        />
                                      </div>
                                    )
                                  )}
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'25mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'50mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '50X30 Single':
                            return templateAvailable ? (
                              !(
                                productName ||
                                mDate ||
                                eDate ||
                                barcode ||
                                qrcode ||
                                mrp
                              ) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div
                                    className="BarQrprint6"
                                    style={secondValueStyle}
                                  >
                                    <div className="BarQrprint1details flexDirection">
                                      {productName && (
                                        <div
                                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {nickName
                                            ? nickName
                                            : proName
                                              ? proName
                                              : 'Product Name'}
                                        </div>
                                      )}
                                      {mDate &&
                                        detail?.ProdVariantPriceDetails?.[0]
                                          ?.ManufDate && (
                                          <div className="MandateBQ">
                                            {formatDate(
                                              detail
                                                ?.ProdVariantPriceDetails?.[0]
                                                ?.ManufDate
                                            )}
                                          </div>
                                        )}
                                      {eDate &&
                                        detail?.ProdVariantPriceDetails?.[0]
                                          ?.ExpDate && (
                                          <div className="ExpdateBQ">
                                            {formatDate(
                                              detail
                                                ?.ProdVariantPriceDetails?.[0]
                                                ?.ExpDate
                                            )}
                                          </div>
                                        )}
                                    </div>
                                    <div
                                      className="Barcodeimage flexDirection"
                                      style={valueStyleColumn}
                                    >
                                      {(barcode || qrcode) &&
                                        handleImageTag(
                                          barcodeOrQr ? 70 : 35,
                                          35,
                                          barcodeOrQr
                                        )}
                                      {mrp && (
                                        <div className="MRPBQ">
                                          {'MRP : ' + (detail?.MRP || 10.0)}
                                        </div>
                                      )}
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'30mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'50mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid50x30_1cross">
                                  <div className="Sticker4 bg-white">
                                    <div className="Sticker4-name">
                                      <p
                                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                      >
                                        {proName || 'Product Name'} (
                                        {size || '1 PCS'})
                                      </p>
                                      <p>{ProdId || 'QR987968'}</p>
                                    </div>
                                    <img
                                      src={qrCodeImage}
                                      style={{
                                        width: '15mm',
                                        height: '15mm',
                                      }}
                                    />
                                  </div>
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'30mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'50mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '50X25 Single':
                            return templateAvailable ? (
                              !(
                                productName ||
                                mDate ||
                                barcode ||
                                qrcode ||
                                mrp
                              ) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div
                                    className="BarQrprint2"
                                    style={secondValueStyle}
                                  >
                                    <div className="BarQrprint1details flexDirection">
                                      {productName && (
                                        <div
                                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {nickName
                                            ? nickName
                                            : proName
                                              ? proName
                                              : 'Product Name'}
                                        </div>
                                      )}
                                      {mDate &&
                                        detail?.ProdVariantPriceDetails?.[0]
                                          ?.ManufDate && (
                                          <div className="MandateBQ">
                                            {formatDate(
                                              detail
                                                ?.ProdVariantPriceDetails?.[0]
                                                ?.ManufDate
                                            )}
                                          </div>
                                        )}
                                    </div>
                                    <div
                                      className="Barcodeimage"
                                      style={valueStyleColumn}
                                    >
                                      {(barcode || qrcode) &&
                                        handleImageTag(
                                          barcodeOrQr ? 70 : 35,
                                          35,
                                          barcodeOrQr
                                        )}
                                      {mrp && (
                                        <div className="MRPBQ">
                                          {'MRP : ' + (detail?.MRP || '10.0')}
                                        </div>
                                      )}
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'50mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid50x25_1cross">
                                  <div className="Sticker5 bg-white">
                                    <div className="Sticker5-name">
                                      <p
                                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                      >
                                        {proName || 'Product Name'} (
                                        {size || '1 PCS'})
                                      </p>
                                      <p>{ProdId || 'QR8798639'}</p>
                                    </div>
                                    <img
                                      src={qrCodeImage}
                                      style={{
                                        width: '13mm',
                                        height: '13mm',
                                      }}
                                    />
                                  </div>
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'25mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'50mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '100X13 (55MM Printable)':
                            return templateAvailable ? (
                              !(
                                productName ||
                                sellingPrice ||
                                barcode ||
                                qrcode
                              ) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div
                                    className="BarQrprint9"
                                    style={valueStyleRow}
                                  >
                                    {(barcode || qrcode) &&
                                      handleImageTag(
                                        barcodeOrQr ? 140 : 35,
                                        35,
                                        barcodeOrQr
                                      )}
                                    <div className="BarQrprint1details1">
                                      {productName && (
                                        <div
                                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {nickName
                                            ? nickName
                                            : proName
                                              ? proName
                                              : 'Product Name'}
                                        </div>
                                      )}
                                      {sellingPrice && (
                                        <div className="SellingpriceBQ">
                                          {`Selling Price : ` +
                                            (detail?.SellPrice || '10.0')}
                                        </div>
                                      )}
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'13mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'100mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid100x13_1cross">
                                  <div className="Sticker6 bg-white">
                                    <div className={`text-section6`}>
                                      <p
                                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                      >
                                        {proName || 'Product Name'} (
                                        {size || '1 PCS'})
                                      </p>
                                      <p>{ProdId || 'QR0970970'}</p>
                                    </div>
                                    <img
                                      src={qrCodeImage}
                                      style={{
                                        width: '11mm',
                                        height: '11mm',
                                      }}
                                    />
                                  </div>
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'13mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'100mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '100X15 (70MM Printable)':
                            return templateAvailable ? (
                              !(
                                productName ||
                                sellingPrice ||
                                barcode ||
                                qrcode ||
                                mrp
                              ) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div
                                    className="BarQrprint1"
                                    style={valueStyleRow}
                                  >
                                    <div className="BarQrprint1details flexDirection">
                                      {productName && (
                                        <div
                                          style={{ textAlign: 'left' }}
                                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {nickName
                                            ? nickName
                                            : proName
                                              ? proName
                                              : 'Product Name'}
                                        </div>
                                      )}
                                      {mrp && (
                                        <div className="MRPBQ">
                                          {'MRP : ' + (detail?.MRP || '10.0')}
                                        </div>
                                      )}
                                      {sellingPrice && (
                                        <div className="SellingpriceBQ">
                                          {`Selling Price : ` +
                                            (detail?.SellPrice || '10.0')}
                                        </div>
                                      )}
                                    </div>
                                    <div className="Qrcodeimage">
                                      {(barcode || qrcode) &&
                                        handleImageTag(
                                          barcodeOrQr ? 90 : 40,
                                          null,
                                          barcodeOrQr
                                        )}
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'15mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'100mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid100x15_1cross">
                                  <div className="Sticker7 bg-white">
                                    <div className="text-section7">
                                      <p
                                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                      >
                                        {proName || 'Product Name'} (
                                        {size || '1 PCS'})
                                      </p>
                                      <p>{ProdId || 'QR858755'}</p>
                                    </div>
                                    <img
                                      src={qrCodeImage}
                                      style={{
                                        width: '12mm',
                                        height: '12mm',
                                      }}
                                    />
                                  </div>
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'15mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'100mm'}
                                  </p>
                                </div>
                              </>
                            );
                          case '100X150':
                            return templateAvailable ? (
                              !(
                                productName ||
                                sellingPrice ||
                                mDate ||
                                eDate ||
                                color ||
                                barcode ||
                                qrcode ||
                                mrp
                              ) ? (
                                <Empty />
                              ) : (
                                <>
                                  <div
                                    className="BarQrprint7"
                                    style={secondValueStyle}
                                  >
                                    <div className="BarQrprint1details1">
                                      {productName && (
                                        <div
                                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {nickName
                                            ? nickName
                                            : proName
                                              ? proName
                                              : 'Product Name'}
                                        </div>
                                      )}
                                      {sellingPrice && (
                                        <div className="SellingpriceBQ">
                                          {`Selling Price : ` +
                                            detail?.SellPrice}
                                        </div>
                                      )}
                                      {mDate &&
                                        detail?.ProdVariantPriceDetails?.[0]
                                          ?.ManufDate && (
                                          <div className="MandateBQ">
                                            {formatDate(
                                              detail
                                                ?.ProdVariantPriceDetails?.[0]
                                                ?.ManufDate
                                            )}
                                          </div>
                                        )}
                                      {eDate &&
                                        detail?.ProdVariantPriceDetails?.[0]
                                          ?.ExpDate && (
                                          <div className="ExpdateBQ">
                                            {formatDate(
                                              detail
                                                ?.ProdVariantPriceDetails?.[0]
                                                ?.ExpDate
                                            )}
                                          </div>
                                        )}
                                      {color && (
                                        <div className="ColorBQ">
                                          {colorText}
                                        </div>
                                      )}
                                    </div>
                                    <div
                                      className="Barcodeimage"
                                      style={valueStyleColumn}
                                    >
                                      {(barcode || qrcode) &&
                                        handleImageTag(
                                          barcodeOrQr ? 140 : 35,
                                          35,
                                          barcodeOrQr
                                        )}
                                      {mrp && (
                                        <div className="MRPBQ">
                                          {'MRP : ' + (detail?.MRP || '10.0')}
                                        </div>
                                      )}
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'150mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'100mm'}
                                    </p>
                                  </div>
                                </>
                              )
                            ) : (
                              <>
                                <div className="grid100x150_1cross  bg-white">
                                  <div className="OverAllSticker8">
                                    <div className="StikerBr8">
                                      <p>{detail?.BrName}</p>
                                    </div>
                                    <div className="Sticker8">
                                      <div className="text-section8">
                                        <p>
                                          Product Name:{' '}
                                          <p
                                            className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </p>
                                        </p>
                                        <p>
                                          SIZE:{' '}
                                          <span className="field-value">
                                            {size || '1 PCS'}
                                          </span>
                                        </p>
                                        <p>
                                          Id:{' '}
                                          <span className="field-value">
                                            {ProdId || 'QR86868'}
                                          </span>
                                        </p>
                                        <p>
                                          MRP:{' '}
                                          <span className="field-value">
                                            {'MRP : ' + (detail?.MRP || '10.0')}
                                          </span>
                                        </p>
                                        <p>
                                          Selling Price:{' '}
                                          <span className="field-value">
                                            {detail?.SellPrice || '10.0'}
                                          </span>
                                        </p>
                                      </div>
                                      <img
                                        src={qrCodeImage}
                                        style={{
                                          width: '50mm',
                                          height: '50mm',
                                        }}
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div className="showInfoCross4Print">
                                  <p>
                                    Vertical
                                    <div>
                                      <GiVerticalFlip size={25} />{' '}
                                    </div>
                                    - {'150mm'}
                                  </p>
                                  <p>
                                    Horizontal
                                    <div>
                                      <GiHorizontalFlip size={30} />{' '}
                                    </div>
                                    - {'100mm'}
                                  </p>
                                </div>
                              </>
                            );
                          default:
                            return <Empty />;
                        }
                      })()}
                      <p>{dropdownValue}</p>
                    </div>
                  </div>
                </div>
              </div>
            </Form.Item>
            {!MultiCode && (
              <Form.Item
                name="Copies"
                rules={[
                  {
                    required: true,
                    pattern: /^[1-9]\d*(\.\d+)?$/,
                    message: 'Please Enter Copies',
                  },
                  {
                    validator: async (_, value) => {
                      await validateSafeInput(value);
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <InputField
                  autoComplete="off"
                  label={<label className="required">Copies</label>}
                  isOnChange={false}
                  onChange={(e) => {
                    CopiesOnChange(e?.target?.value);
                  }}
                />
              </Form.Item>
            )}
            {proName?.length > 12 && printProductName && !MultiCode && (
              <>
                <div
                  style={{
                    width: '100%',
                    fontSize: '12px',
                    marginTop: '-10px',
                    fontFamily: 'Poppins',
                    fontStyle: 'italic',
                    color: '#ff4d4f',
                  }}
                >
                  Note: Product name is very long. Please add a short/nick name
                  to proceed print.
                </div>
                <Form.Item
                  name="NickName"
                  rules={[
                    {
                      message: 'Please Enter Product Short / Nick Name',
                    },
                    {
                      max: 12,
                      message:
                        'Product Short / Nick Name cannot be greater than 12 characters',
                    },
                  ]}
                >
                  <InputField
                    autoComplete="off"
                    label={`Product Short / Nick Name`}
                    onChange={(e) => {
                      setNickName(e?.target?.value);
                    }}
                    maxLength={12}
                  />
                </Form.Item>
              </>
            )}
          </div>
          <div
            style={{
              width: '100%',
              display: 'flex',
              justifyContent: 'flex-end',
            }}
          >
            {(!MultiCode || totalCopies > 0) && (
              <Buttons buttonText="Submit" color="901D77" />
            )}
            {MultiCode && totalCopies === 0 && (
              <button
                type="button"
                className="product_primary_Button"
                onClick={() => setstockWiseQrcode(true)}
              >
                Submit
              </button>
            )}
          </div>
        </Form>
      }
    />
  );
};

export default StickerPrintModel;