const StickerPrintTemplates = ({
  selectedRecords,
  copies,
  nickName,
  proName,
  ProdId,
  size,
  detail,
  templateOptions,
  base64Image,
  QrandbarcodeDatas,
  MultiCode,
  generateQRCodeCopy,
  generateCodeImage,
  imageTagBarcodeAndQR,
  dropdownValue,
  barcodeTemplateDetails,
}) => {
  const template = barcodeTemplateDetails?.find(
    (find) => find.SessionName === dropdownValue
  );
  const templateAvailable = template === undefined ? false : true;

  function choosenPrintStyle(dropdownValue, templateAvailable) {
    switch (dropdownValue) {
      case '15X15 6cross':
        return templateAvailable ? 'label-15X156cross' : 'StickerPrints0';

      case '22X35 3cross':
        return templateAvailable ? '22X353cross' : 'StickerPrints1';

      case '25X25 4cross':
        return templateAvailable ? '25X254cross' : 'StickerPrints2';

      case '25X50 2cross':
        return templateAvailable ? '25X502cross' : 'StickerPrints3';

      case '50X30 Single':
        return templateAvailable ? '50X30Single' : 'StickerPrints4';

      case '50X25 Single':
        return templateAvailable ? '50X25Single' : 'StickerPrints5';

      case '100X13 (55MM Printable)':
        return templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6';

      case '100X15 (70MM Printable)':
        return templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7';

      case '100X150':
        return templateAvailable ? '100X150' : 'StickerPrints8';

      default:
        return null;
    }
  }
  const selectStyle = choosenPrintStyle(dropdownValue, templateAvailable);
  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 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';
  console.log(selectStyle, 'selectStyle');
  return (
    <div style={{ display: 'none' }}>
      {selectStyle == 'StickerPrints0' && (
        <div id="StickerPrints0">
          <div className="grid15x15_6cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCountcopyCountcopyCount');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="Sticker0"
                        key={`sticker0-${recordIndex}-${copyIndex}`}
                      >
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                          style={{ width: '52px', height: '52px' }}
                        />
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="Sticker0" key={`sticker0-${index}`}>
                    <img
                      src={base64Image}
                      style={{ width: '13mm', height: '13mm' }}
                    />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints1' && (
        <div id="StickerPrints1">
          <div className="grid22x35_3cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  return Array?.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="label-wrapper-22x35"
                        key={`sticker1-${recordIndex}-${copyIndex}`}
                      >
                        <div style={{ width: '60%' }}>
                          <p
                            className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-clamp-2' : ''}`}
                          >
                            {record.ProdName} ({record.Size}
                            {record.UomName})
                          </p>
                          <p>{record.QRCode}</p>
                        </div>
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                        />
                      </div>
                    )
                  );
                })
              : Array?.from({ length: copies })?.map((_, index) => (
                  <div
                    className="label-wrapper-22x35"
                    key={`sticker1-${index}`}
                  >
                    <div style={{ width: '19mm' }}>
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
                      >
                        {proName} ({size})
                      </p>
                      <p>{ProdId}</p>
                    </div>
                    <img src={base64Image} />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints2' && (
        <div id="StickerPrints2">
          <div className="grid25x25_4cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount2');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="sticker25x25"
                        key={`sticker2-${recordIndex}-${copyIndex}`}
                      >
                        <p
                          className={`sticker25x25-name ${nickName ? '' : (record?.ProdName + '(' + record?.Size + '' + record?.UomName + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
                        >
                          <span
                            class={
                              (record?.NickName || record?.ProdName)?.length <=
                              14
                                ? 'product-name2'
                                : 'product-nameSmall2'
                            }
                          >
                            {record?.NickName || record?.ProdName}
                          </span>
                          <span
                            class={
                              (record?.NickName || record?.ProdName)?.length <=
                              14
                                ? 'product-size2'
                                : 'product-sizeSmall2'
                            }
                          >
                            ({record?.Size}
                            {record?.UomName})
                          </span>
                        </p>
                        <div
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            width: '100%',
                            flexDirection: 'column',
                            justifyContent: 'center',
                          }}
                        >
                          <img
                            src={
                              generateCodeImage(
                                record?.QRCode || record?.ProdId,
                                templateOptions?.codeType
                              ) || base64Image
                            }
                            className="sticker25-img"
                            alt="barcode"
                          />
                          <p class="product-id2">
                            {record?.QRCode || record?.ProdId}
                          </p>
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="sticker25x25" key={`sticker2-${index}`}>
                    <p
                      className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
                    >
                      <span
                        class={
                          proName?.length <= 14
                            ? 'product-name2'
                            : 'product-nameSmall2'
                        }
                      >
                        {nickName
                          ? nickName
                          : proName
                            ? proName
                            : 'Product Name'}
                      </span>
                      <span
                        class={
                          proName?.length <= 14
                            ? 'product-size2'
                            : 'product-sizeSmall2'
                        }
                      >
                        ({size})
                      </span>
                    </p>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        width: '100%',
                        flexDirection: 'column',
                        justifyContent: 'center',
                      }}
                    >
                      <img
                        src={base64Image}
                        className="sticker25-img"
                        alt="barcode"
                      />
                      <p class="product-id2">{ProdId}</p>
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints3' && (
        <div id="StickerPrints3">
          <div className="grid25x50_2cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount3');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="label-25x50-content"
                        key={`sticker3-${recordIndex}-${copyIndex}`}
                      >
                        <div>
                          <p
                            className={`${nickName ? '' : ((record?.NickName || record?.ProdName) + ' (' + record?.Size + ')')?.length > 12 ? 'text-clamp-2' : ''}`}
                          >
                            {record?.NickName || record?.ProdName} (
                            {record?.Size}
                            {record?.UomName})
                          </p>
                          <p>{record?.QRCode || record?.ProdId}</p>
                        </div>
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                          style={{ width: '75px', height: '75px' }}
                        />
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="label-25x50-content"
                    key={`sticker3-${index}`}
                  >
                    <div>
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-clamp-2' : ''}`}
                      >
                        {proName} ({size})
                      </p>
                      <p>{ProdId}</p>
                    </div>
                    <img src={base64Image} />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints4' && (
        <div id="StickerPrints4">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount4');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="Sticker4"
                        key={`sticker4-${recordIndex}-${copyIndex}`}
                      >
                        <div>
                          <p
                            className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName} (
                            {record?.Size}
                            {record?.UomName})
                          </p>
                          <p>{record?.QRCode || record?.ProdId}</p>
                        </div>
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                          style={{ width: '75px', height: '75px' }}
                        />
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="Sticker4" key={`sticker4-${index}`}>
                    <div>
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {proName} ({size})
                      </p>
                      <p>{ProdId}</p>
                    </div>
                    <img
                      src={base64Image}
                      style={{ width: '75px', height: '75px' }}
                    />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints5' && (
        <div id="StickerPrints5">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount5');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="Sticker5"
                        key={`sticker5-${recordIndex}-${copyIndex}`}
                      >
                        <div>
                          <p
                            className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName} (
                            {record?.Size}
                            {record?.UomName})
                          </p>
                          <p>{record?.QRCode || record?.ProdId}</p>
                        </div>
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                          style={{ width: '72px', height: '72px' }}
                        />
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="Sticker5" key={`sticker5-${index}`}>
                    <div>
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {proName} ({size})
                      </p>
                      <p>{ProdId}</p>
                    </div>
                    <img
                      src={base64Image}
                      style={{ width: '72px', height: '72px' }}
                    />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints6' && (
        <div id="StickerPrints6">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount6');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="Sticker6"
                        key={`sticker6-${recordIndex}-${copyIndex}`}
                      >
                        <div className="text-section6">
                          <p
                            className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName} (
                            {record?.Size}
                            {record?.UomName})
                          </p>
                          <p>{record?.QRCode || record?.ProdId}</p>
                        </div>
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                          style={{ width: '11mm', height: '11mm' }}
                        />
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="Sticker6" key={`sticker6-${index}`}>
                    <div className="text-section6">
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {proName} ({size})
                      </p>
                      <p>{ProdId}</p>
                    </div>
                    <img
                      src={base64Image}
                      style={{ width: '11mm', height: '11mm' }}
                    />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints7' && (
        <div id="StickerPrints7">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount7');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="Sticker7"
                        key={`sticker7-${recordIndex}-${copyIndex}`}
                      >
                        <div className="text-section7">
                          <p
                            className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName} (
                            {record?.Size}
                            {record?.UomName})
                          </p>
                          <p>{record?.QRCode || record?.ProdId}</p>
                        </div>
                        <img
                          src={
                            generateCodeImage(
                              record?.QRCode || record?.ProdId,
                              templateOptions?.codeType
                            ) || base64Image
                          }
                          style={{ width: '12mm', height: '12mm' }}
                        />
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="Sticker7" key={`sticker7-${index}`}>
                    <div className="text-section7">
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {proName} ({size})
                      </p>
                      <p>{ProdId}</p>
                    </div>
                    <img
                      src={base64Image}
                      style={{ width: '12mm', height: '12mm' }}
                    />
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'StickerPrints8' && (
        <div id="StickerPrints8">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  console.log(copyCount, 'copyCount8');
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="OverAllSticker8"
                        key={`sticker8-${recordIndex}-${copyIndex}`}
                      >
                        <div className="StikerBr8">
                          <p>{record?.BrName || detail?.BrName}</p>
                        </div>
                        <div className="Sticker8">
                          <div className="text-section8">
                            <p>
                              Product Name:{' '}
                              <p
                                className={`field-value ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                              >
                                {record?.NickName || record?.ProdName}
                              </p>
                            </p>
                            <p>
                              SIZE:{' '}
                              <span className="field-value">
                                {record?.Size}
                                {record?.UomName}
                              </span>
                            </p>
                            <p>
                              Id:{' '}
                              <span className="field-value">
                                {record?.QRCode || record?.ProdId}
                              </span>
                            </p>
                            <p>
                              MRP:{' '}
                              <span className="field-value">
                                {'MRP : ' + record?.MRP}
                              </span>
                            </p>
                            <p>
                              Selling Price:{' '}
                              <span className="field-value">
                                {record?.SellPrice}
                              </span>
                            </p>
                          </div>
                          <img
                            src={
                              generateCodeImage(
                                record?.QRCode || record?.ProdId,
                                templateOptions?.codeType
                              ) || base64Image
                            }
                            style={{ width: '50mm', height: '50mm' }}
                          />
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="OverAllSticker8">
                    <div className="StikerBr8">
                      <p>{detail?.BrName}</p>
                    </div>
                    <div className="Sticker8" key={`sticker8-${index}`}>
                      <div className="text-section8">
                        <p>
                          Product Name:{' '}
                          <p
                            className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {proName}
                          </p>
                        </p>
                        <p>
                          SIZE: <span className="field-value">{size}</span>
                        </p>
                        <p>
                          Id: <span className="field-value">{ProdId}</span>
                        </p>
                        <p>
                          MRP:{' '}
                          <span className="field-value">
                            {'MRP : ' + detail?.MRP}
                          </span>
                        </p>
                        <p>
                          Selling Price:{' '}
                          <span className="field-value">
                            {detail?.SellPrice}
                          </span>
                        </p>
                      </div>
                      <img
                        src={base64Image}
                        style={{ width: '50mm', height: '50mm' }}
                      />
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == '25X254cross' && (
        <div id="25X254cross">
          <div className="grid25x25_4cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => {
                      const hasProductName = !!templateOptions.productName;
                      const hasMrp = !!templateOptions.mrp;

                      const hasMDate =
                        templateOptions.mDate && record?.ManufDate;

                      const hasEDate = templateOptions.eDate && record?.ExpDate;

                      // IMAGE SIZE LOGIC
                      let imageSize = 50;
                      if (!hasMDate && !hasEDate) {
                        imageSize = 52;
                      }

                      if (!hasProductName || !hasMrp) {
                        imageSize = 60;
                      }

                      if (!hasProductName && !hasMrp) {
                        imageSize = 80;
                      }

                      // FLEX DIRECTION LOGIC
                      const forceColumnLayout =
                        !hasProductName || !hasMrp || (!hasMDate && !hasEDate);
                      return (
                        <div
                          className="barcode-wrapper-25x25"
                          key={`Barcode1-${recordIndex}-${copyIndex}`}
                        >
                          <div className="barcode-container-25x25">
                            {templateOptions.value === 'T' && (
                              <div
                                style={{
                                  width: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  flexDirection: forceColumnLayout
                                    ? 'column'
                                    : 'row',
                                }}
                              >
                                {imageTagBarcodeAndQR(
                                  templateOptions.codeType === 'B'
                                    ? '90%'
                                    : `${imageSize}%`,
                                  '7px',
                                  record?.QRCode || record?.ProdId
                                )}
                              </div>
                            )}
                            {hasProductName && (
                              <div
                                style={{
                                  fontSize: '9px',
                                  textAlign: 'center',
                                  width: '100%',
                                }}
                                className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                              >
                                {record?.NickName || record?.ProdName}
                              </div>
                            )}
                            {hasMrp && (
                              <div
                                style={{
                                  fontSize: '9px',
                                  textAlign: 'center',
                                  width: '100%',
                                }}
                                className="MRPBQ"
                              >
                                {'₹' + record?.MRP}
                              </div>
                            )}
                            {templateOptions.value === 'C' && (
                              <div
                                style={{
                                  width: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  flexDirection: forceColumnLayout
                                    ? 'column'
                                    : 'row',
                                }}
                              >
                                {imageTagBarcodeAndQR(
                                  templateOptions.codeType === 'B'
                                    ? '90%'
                                    : `${imageSize}%`,
                                  '7px',
                                  record?.QRCode || record?.ProdId
                                )}
                              </div>
                            )}
                            {(hasMDate || hasEDate) && (
                              <div
                                style={{
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  gap: '3px',
                                }}
                              >
                                {hasMDate && (
                                  <div
                                    style={{
                                      fontSize: '8px',
                                      whiteSpace: 'nowrap',
                                      textAlign: 'center',
                                      width: '100%',
                                    }}
                                    className="MandateBQ"
                                  >
                                    {hasMDate && !hasEDate ? 'MFG: ' : ''}
                                    {formatDate(record?.ManufDate)}
                                  </div>
                                )}
                                {hasMDate && hasEDate && (
                                  <span style={{ fontSize: '8px' }}>|</span>
                                )}
                                {hasEDate && (
                                  <div
                                    style={{
                                      fontSize: '8px',
                                      whiteSpace: 'nowrap',
                                      textAlign: 'center',
                                      width: '100%',
                                    }}
                                    className="ExpdateBQ"
                                  >
                                    {!hasMDate && hasEDate ? 'EXP: ' : ''}
                                    {formatDate(record?.ExpDate)}
                                  </div>
                                )}
                              </div>
                            )}
                            {templateOptions.value === 'B' && (
                              <div
                                style={{
                                  width: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  flexDirection: forceColumnLayout
                                    ? 'column'
                                    : 'row',
                                }}
                              >
                                {imageTagBarcodeAndQR(
                                  templateOptions.codeType === 'B'
                                    ? '25mm'
                                    : `${imageSize}%`,
                                  '7px',
                                  record?.QRCode || record?.ProdId
                                )}
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    }
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => {
                  const hasProductName = !!templateOptions.productName;
                  const hasMrp = !!templateOptions.mrp;

                  const hasMDate =
                    templateOptions.mDate &&
                    detail?.ProdVariantPriceDetails?.[0]?.ManufDate;

                  const hasEDate =
                    templateOptions.eDate &&
                    detail?.ProdVariantPriceDetails?.[0]?.ExpDate;

                  // IMAGE SIZE LOGIC
                  let imageSize = 50;
                  if (!hasMDate && !hasEDate) {
                    imageSize = 52;
                  }

                  if (!hasProductName || !hasMrp) {
                    imageSize = 60;
                  }

                  if (!hasProductName && !hasMrp) {
                    imageSize = 80;
                  }

                  // FLEX DIRECTION LOGIC
                  const forceColumnLayout =
                    !hasProductName || !hasMrp || (!hasMDate && !hasEDate);
                  return (
                    <div
                      className="barcode-wrapper-25x25"
                      key={`Barcode1-${index}`}
                    >
                      <div className="barcode-container-25x25">
                        {templateOptions.value === 'T' && (
                          <div
                            style={{
                              width: '100%',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexDirection: forceColumnLayout
                                ? 'column'
                                : 'row',
                            }}
                          >
                            {imageTagBarcodeAndQR(
                              templateOptions.codeType === 'B'
                                ? '90%'
                                : `${imageSize}%`,
                              '7px'
                            )}
                          </div>
                        )}
                        {hasProductName && (
                          <div
                            style={{
                              fontSize: '9px',
                              textAlign: 'center',
                              width: '100%',
                            }}
                            className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {nickName
                              ? nickName
                              : proName
                                ? proName
                                : 'Product Name'}
                          </div>
                        )}
                        {hasMrp && (
                          <div
                            style={{
                              fontSize: '9px',
                              textAlign: 'center',
                              width: '100%',
                            }}
                            className="MRPBQ"
                          >
                            {'₹' + detail?.MRP}
                          </div>
                        )}
                        {templateOptions.value === 'C' && (
                          <div
                            style={{
                              width: '100%',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexDirection: forceColumnLayout
                                ? 'column'
                                : 'row',
                            }}
                          >
                            {imageTagBarcodeAndQR(
                              templateOptions.codeType === 'B'
                                ? '90%'
                                : `${imageSize}%`,
                              '7px'
                            )}
                          </div>
                        )}
                        {(hasMDate || hasEDate) && (
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              gap: '3px',
                            }}
                          >
                            {hasMDate && (
                              <div
                                style={{
                                  fontSize: '8px',
                                  whiteSpace: 'nowrap',
                                  textAlign: 'center',
                                  width: '100%',
                                }}
                                className="MandateBQ"
                              >
                                {hasMDate && !hasEDate ? 'MFG: ' : ''}
                                {formatDate(
                                  detail?.ProdVariantPriceDetails?.[0]
                                    ?.ManufDate
                                )}
                              </div>
                            )}
                            {hasMDate && hasEDate && (
                              <span style={{ fontSize: '8px' }}>|</span>
                            )}
                            {hasEDate && (
                              <div
                                style={{
                                  fontSize: '8px',
                                  whiteSpace: 'nowrap',
                                  textAlign: 'center',
                                  width: '100%',
                                }}
                                className="ExpdateBQ"
                              >
                                {!hasMDate && hasEDate ? 'EXP: ' : ''}
                                {formatDate(
                                  detail?.ProdVariantPriceDetails?.[0]?.ExpDate
                                )}
                              </div>
                            )}
                          </div>
                        )}
                        {templateOptions.value === 'B' && (
                          <div
                            style={{
                              width: '100%',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexDirection: forceColumnLayout
                                ? 'column'
                                : 'row',
                            }}
                          >
                            {imageTagBarcodeAndQR(
                              templateOptions.codeType === 'B'
                                ? '25mm'
                                : `${imageSize}%`,
                              '7px'
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
          </div>
        </div>
      )}

      {selectStyle == '25X502cross' && (
        <div id="25X502cross">
          <div className="grid25x50_2cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="label25x50-wrapper"
                        key={`Barcode2-${recordIndex}-${copyIndex}`}
                      >
                        <div
                          className="label25x50-container"
                          style={valueStyleColumn}
                        >
                          {imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B' ? '45mm' : '16mm',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                          {templateOptions.productName && (
                            <div
                              className={`label25x50-name ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                            >
                              {record?.NickName || record?.ProdName}
                            </div>
                          )}
                          {templateOptions.mrp && (
                            <div className="label25x50-mrp">
                              {'MRP : ' + record?.MRP}
                            </div>
                          )}
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div className="label25x50-wrapper" key={`Barcode2-${index}`}>
                    <div
                      className="label25x50-container"
                      style={valueStyleColumn}
                    >
                      {imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B' ? '45mm' : '16mm'
                      )}
                      {templateOptions.productName && (
                        <div
                          className={`label25x50-name ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {proName}
                        </div>
                      )}
                      {templateOptions.mrp && (
                        <div className="label25x50-mrp">
                          {'MRP : ' + detail?.MRP}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}

      {selectStyle == '50X30Single' && (
        <div id="50X30Single">
          {selectedRecords?.length > 0
            ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);

                return Array.from({ length: copyCount })?.map(
                  (_, copyIndex) => (
                    <div
                      className="BarQrprint6"
                      style={secondValueStyle}
                      key={`Barcode3-${recordIndex}-${copyIndex}`}
                    >
                      <div className="BarQrprint1details flexDirection">
                        {templateOptions.productName && (
                          <div
                            className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName}
                          </div>
                        )}
                        {templateOptions.mDate && record?.ManufDate && (
                          <div
                            style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                            className="MandateBQ"
                          >
                            {record?.ManufDate}
                          </div>
                        )}
                        {templateOptions.eDate && record?.ExpDate && (
                          <div
                            style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                            className="ExpdateBQ"
                          >
                            {record?.ExpDate}
                          </div>
                        )}
                      </div>
                      <div
                        className="Barcodeimage flexDirection"
                        style={valueStyleColumn}
                      >
                        {imageTagBarcodeAndQR(
                          '70%',
                          '6px',
                          record?.QRCode || record?.ProdId
                        )}
                        {templateOptions.mrp && (
                          <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
                        )}
                      </div>
                    </div>
                  )
                );
              })
            : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="BarQrprint6"
                  style={secondValueStyle}
                  key={`Barcode3-${index}`}
                >
                  <div className="BarQrprint1details flexDirection">
                    {templateOptions.productName && (
                      <div
                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {nickName
                          ? nickName
                          : proName
                            ? proName
                            : 'Product Name'}
                      </div>
                    )}
                    {templateOptions.mDate &&
                      detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
                        <div
                          style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                          className="MandateBQ"
                        >
                          {detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
                        </div>
                      )}
                    {templateOptions.eDate &&
                      detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
                        <div
                          style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                          className="ExpdateBQ"
                        >
                          {detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
                        </div>
                      )}
                  </div>
                  <div
                    className="Barcodeimage flexDirection"
                    style={valueStyleColumn}
                  >
                    {imageTagBarcodeAndQR('70%')}
                    {templateOptions.mrp && (
                      <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                    )}
                  </div>
                </div>
              ))}
        </div>
      )}

      {selectStyle == '50X25Single' && (
        <div id="50X25Single">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);

                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="BarQrprint2"
                        style={secondValueStyle}
                        key={`Barcode4-${recordIndex}-${copyIndex}`}
                      >
                        <div
                          className="BarQrprint1details flexDirection"
                          style={{ width: '80%' }}
                        >
                          {templateOptions.productName && (
                            <div
                              className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                            >
                              {record?.NickName || record?.ProdName}
                            </div>
                          )}
                          {templateOptions.mDate && record?.ManufDate && (
                            <div
                              style={{ fontSize: '10px' }}
                              className="MandateBQ"
                            >
                              {record?.ManufDate}
                            </div>
                          )}
                          {templateOptions.eDate && record?.ExpDate && (
                            <div
                              style={{ fontSize: '10px' }}
                              className="ExpdateBQ"
                            >
                              {record?.ExpDate}
                            </div>
                          )}
                        </div>
                        <div
                          className="Barcodeimage"
                          style={{
                            valueStyleColumn,
                            width: '60%',
                            flexDirection: 'column',
                          }}
                        >
                          {imageTagBarcodeAndQR(
                            '90%',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                          {templateOptions.mrp && (
                            <div className="MRPBQ">
                              {'MRP : ' + record?.MRP}
                            </div>
                          )}
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="BarQrprint2"
                    style={secondValueStyle}
                    key={`Barcode4-${index}`}
                  >
                    <div
                      className="BarQrprint1details flexDirection"
                      style={{ width: '80%' }}
                    >
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {nickName
                            ? nickName
                            : proName
                              ? proName
                              : 'Product Name'}
                        </div>
                      )}
                      {templateOptions.mDate &&
                        detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
                          <div
                            style={{ fontSize: '10px' }}
                            className="MandateBQ"
                          >
                            {detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
                          </div>
                        )}
                      {templateOptions.eDate &&
                        detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
                          <div
                            style={{ fontSize: '10px' }}
                            className="ExpdateBQ"
                          >
                            {detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
                          </div>
                        )}
                    </div>
                    <div
                      className="Barcodeimage"
                      style={{
                        valueStyleColumn,
                        width: '60%',
                        flexDirection: 'column',
                      }}
                    >
                      {imageTagBarcodeAndQR('90%')}
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                      )}
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}

      {selectStyle == '100X13(55MMPrintable)' && (
        <div id="100X13(55MMPrintable)">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);
                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="BarQrprint9"
                        key={`Barcode5-${recordIndex}-${copyIndex}`}
                        style={valueStyleRow}
                      >
                        {imageTagBarcodeAndQR(
                          'auto',
                          '6px',
                          record?.QRCode || record?.ProdId
                        )}
                        <div className="BarQrprint1details1">
                          {templateOptions.productName && (
                            <div style={{ fontSize: '8px' }}>
                              {'Product Name :' +
                                (record?.NickName || record?.ProdName)}
                            </div>
                          )}
                          {templateOptions.sellingPrice && (
                            <div style={{ fontSize: '8px' }}>
                              {'Selling Price :' + record?.SellPrice}
                            </div>
                          )}
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="BarQrprint9"
                    key={`Barcode5-${index}`}
                    style={valueStyleRow}
                  >
                    {imageTagBarcodeAndQR()}
                    <div className="BarQrprint1details1">
                      {templateOptions.productName && (
                        <div style={{ fontSize: '8px' }}>
                          {'Product Name :' + proName}
                        </div>
                      )}
                      {templateOptions.sellingPrice && (
                        <div style={{ fontSize: '8px' }}>
                          {'Selling Price :' + detail?.SellPrice}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}

      {selectStyle == '100X15(70MMPrintable)' && (
        <div id="100X15(70MMPrintable)">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);

                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="BarQrprint1"
                        style={valueStyleRow}
                        key={`Barcode6-${recordIndex}-${copyIndex}`}
                      >
                        <div className="BarQrprint1details flexDirection">
                          {templateOptions.productName && (
                            <div
                              className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                            >
                              {'Product Name: ' +
                                (record?.NickName || record?.ProdName)}
                            </div>
                          )}
                          {templateOptions.mrp && (
                            <div className="MRPBQ">
                              {'MRP : ' + record?.MRP}
                            </div>
                          )}
                          {templateOptions.sellingPrice && (
                            <div className="SellingpriceBQ">
                              {'Selling Price :' + record?.SellPrice}
                            </div>
                          )}
                        </div>
                        <div className="Qrcodeimage" style={{ width: '50%' }}>
                          {imageTagBarcodeAndQR(
                            'auto',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="BarQrprint1"
                    style={valueStyleRow}
                    key={`Barcode6-${index}`}
                  >
                    <div className="BarQrprint1details flexDirection">
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {'Product Name' + proName}
                        </div>
                      )}
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                      )}
                      {templateOptions.sellingPrice && (
                        <div className="SellingpriceBQ">
                          {'Selling Price :' + detail?.SellPrice}
                        </div>
                      )}
                    </div>
                    <div className="Qrcodeimage" style={{ width: '50%' }}>
                      {imageTagBarcodeAndQR()}
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == '100X150' && (
        <div id="100X150">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);

                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="BarQrprint7"
                        style={secondValueStyle}
                        key={`Barcode7-${recordIndex}-${copyIndex}`}
                      >
                        <div
                          className="BarQrprint1details1"
                          style={{ gap: '10px' }}
                        >
                          {templateOptions.productName && (
                            <div
                              className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                            >
                              {'Product Name: ' +
                                (record?.NickName || record?.ProdName)}
                            </div>
                          )}
                          {templateOptions.sellingPrice && (
                            <div className="SellingpriceBQ">
                              {'Selling Price :' + record?.SellPrice}
                            </div>
                          )}
                          {templateOptions.mDate && record?.ManufDate && (
                            <div className="MandateBQ">{record?.ManufDate}</div>
                          )}
                          {templateOptions.eDate && record?.ExpDate && (
                            <div className="ExpdateBQ">{record?.ExpDate}</div>
                          )}
                          {templateOptions.color && (
                            <div className="ColorBQ">
                              {record?.Color || colorText}
                            </div>
                          )}
                        </div>
                        <div
                          className="Barcodeimage"
                          style={{
                            valueStyleColumn,
                            width: '50%',
                            flexDirection: 'column',
                          }}
                        >
                          {
                            <div>
                              {imageTagBarcodeAndQR(
                                '70%',
                                '6px',
                                record?.QRCode || record?.ProdId
                              )}
                            </div>
                          }
                          {templateOptions.mrp && (
                            <div className="MRPBQ">
                              {'MRP : ' + record?.MRP}
                            </div>
                          )}
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="BarQrprint7"
                    style={secondValueStyle}
                    key={`Barcode7-${index}`}
                  >
                    <div
                      className="BarQrprint1details1"
                      style={{ gap: '10px' }}
                    >
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {'Product Name' + (nickName ? nickName : proName)}
                        </div>
                      )}
                      {templateOptions.sellingPrice && (
                        <div className="SellingpriceBQ">
                          {'Selling Price :' + detail?.SellPrice}
                        </div>
                      )}
                      {templateOptions.mDate &&
                        detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
                          <div className="MandateBQ">
                            {detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
                          </div>
                        )}
                      {templateOptions.eDate &&
                        detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
                          <div className="ExpdateBQ">
                            {detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
                          </div>
                        )}
                      {templateOptions.color && (
                        <div className="ColorBQ">{colorText}</div>
                      )}
                    </div>
                    <div
                      className="Barcodeimage"
                      style={{
                        valueStyleColumn,
                        width: '50%',
                        flexDirection: 'column',
                      }}
                    >
                      {<div>{imageTagBarcodeAndQR('70%')}</div>}
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                      )}
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}
      {selectStyle == 'label-15X156cross' && (
        <div id="label-15X156cross">
          <div className="label-15x15-container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);

                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="label-15x15-content"
                        key={`Barcode8-${recordIndex}-${copyIndex}`}
                      >
                        {templateOptions.value === 'T' &&
                          imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B' ? '100%' : '6mm',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                        {templateOptions.productName && (
                          <div
                            className={`label-15x15-name ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName
                              ? record?.NickName
                              : record?.ProdName}
                          </div>
                        )}
                        {templateOptions.value === 'C' &&
                          imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B'
                              ? '80%'
                              : !templateOptions.productName &&
                                  !templateOptions.mrp
                                ? '80%'
                                : '35%',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                        {templateOptions.mrp && (
                          <div
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: '6px',
                            }}
                            className="MRPBQ"
                          >
                            {'₹:' + record?.MRP}
                          </div>
                        )}
                        {templateOptions.value === 'B' &&
                          imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B' ? '100%' : '50%',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="label-15x15-content"
                    key={`Barcode8-${index}`}
                  >
                    {templateOptions.value === 'T' &&
                      imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B' ? '100%' : '6mm'
                      )}
                    {templateOptions.productName && (
                      <div
                        className={`label-15x15-name ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {nickName
                          ? nickName
                          : proName
                            ? proName
                            : 'Product Name'}
                      </div>
                    )}
                    {templateOptions.value === 'C' &&
                      imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B'
                          ? '80%'
                          : !templateOptions.productName && !templateOptions.mrp
                            ? '80%'
                            : '7.5mm',
                        '5px'
                      )}
                    {templateOptions.mrp && (
                      <div className="label-15x15-mrp">
                        {'₹:' + (detail?.MRP ? detail?.MRP : 10.0)}
                      </div>
                    )}
                    {templateOptions.value === 'B' &&
                      imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B' ? '100%' : '7.5mm'
                      )}
                  </div>
                ))}
          </div>
        </div>
      )}

      {selectStyle == '22X353cross' && (
        <div id="22X353cross">
          <div className="grid22x35_3cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                  const copyCount = generateQRCodeCopy(record?.QRCode);

                  return Array.from({ length: copyCount })?.map(
                    (_, copyIndex) => (
                      <div
                        className="barcode-wrapper-22x35"
                        key={`Barcode9-${recordIndex}-${copyIndex}`}
                      >
                        <div
                          className="barcode-container-22x35"
                          style={{
                            alignItems: 'center',
                            flexDirection:
                              templateOptions.value === 'T'
                                ? 'column'
                                : 'column-reverse',
                          }}
                        >
                          {imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B'
                              ? '100%'
                              : !templateOptions.mrp &&
                                  !templateOptions.productName
                                ? '60%'
                                : '40%',
                            '8px',
                            record?.QRCode || record?.ProdId
                          )}
                          {(templateOptions.productName ||
                            templateOptions.mrp) && (
                            <div
                              style={{
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                                justifyContent: 'center',
                              }}
                            >
                              {templateOptions.productName && (
                                <div
                                  className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                >
                                  {record?.NickName
                                    ? record?.NickName
                                    : record?.ProdName}
                                </div>
                              )}
                              {templateOptions.mrp && (
                                <div
                                  className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
                                >
                                  {'MRP : ' + record?.MRP}
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                    )
                  );
                })
              : Array.from({ length: copies })?.map((_, index) => (
                  <div
                    className="barcode-wrapper-22x35"
                    key={`Barcode9-${index}`}
                  >
                    <div
                      className="barcode-container-22x35"
                      style={{
                        alignItems: 'center',
                        flexDirection:
                          templateOptions.value === 'T'
                            ? 'column'
                            : 'column-reverse',
                      }}
                    >
                      {imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B'
                          ? '100%'
                          : !templateOptions.mrp && !templateOptions.productName
                            ? '60%'
                            : '40%',
                        '8px'
                      )}
                      {(templateOptions.productName || templateOptions.mrp) && (
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                          }}
                        >
                          {templateOptions.productName && (
                            <div
                              className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                            >
                              {nickName
                                ? nickName
                                : proName
                                  ? proName
                                  : 'Product Name'}
                            </div>
                          )}
                          {templateOptions.mrp && (
                            <div
                              className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
                            >
                              {'MRP : ' + detail?.MRP}
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
          </div>
        </div>
      )}
    </div>
  );
};
export default StickerPrintTemplates;