import { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import {
  Form,
  Checkbox,
  Flex,
  Radio,
  Row,
  Space,
  Segmented,
  Empty,
  Button,
  Tooltip,
} from 'antd';
import { RiBarcodeFill } from 'react-icons/ri';
import { BsQrCode } from 'react-icons/bs';
import {
  ArrowRightOutlined,
  DeleteFilled,
  EditFilled,
  LeftOutlined,
  RightOutlined,
} from '@ant-design/icons';
import {
  CgAlignTop,
  CgAlignRight,
  CgAlignLeft,
  CgAlignCenter,
  CgAlignBottom,
} from 'react-icons/cg';
import { DropDowns } from '../../Components/Forms/DropDown';
import { Messages } from '../../Components/Notifications/Messages';
import { getSession } from '../../Services/Others';
import {
  changeBreadCrumb,
  getEmpAccess,
} from '../../Features/AppPage/CenterPage';
import { Tables } from '../../Components/Tables/Table';
import { useAuth } from '../../AuthContext';
import Buttons from '../../Components/Forms/Buttons';
import * as globalBarcode from '../../Features/Barcode/Barcode';
import './BarcodeTemplateSetup.scss';
import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
import { MdOutlineQrCodeScanner } from 'react-icons/md';
import { IoBarcodeOutline } from 'react-icons/io5';
import { IoQrCodeOutline } from 'react-icons/io5';
import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi';

const subDirectory = import.meta.env.ENV_BASE_URL;
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';
import QrCode from '../../Images/PreviewQrCode.png';
import BarCode from '../../Images/PreviewBarCode.png';
const previewText = 'Barcode Preview';
const mrpText = 'MRP : 450';
const productNameText = 'Product Name';
const mDateText = 'M-Date : 12-12-2002';
const eDateText = 'Exp-Date : 12-12-2004';
const colorText = 'Color : Red';
const sellingPriceText = 'Selling Price : 400';
const barCodePositionText = 'Barcode Position';
const segmentStyle = {
  padding: 4,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  gap: '0.5rem',
};
const items = [
  {
    name: 'Home',
    link: `${subDirectory}app-page/home`,
  },
  // {
  //   name: "BarcodeQrSetup",
  //   link: `${subDirectory}saleslayouts/barcode&qr-selection`,
  // },
];
const positionOption = [
  {
    value: 'L',
    label: (
      <Flex gap="small" justify="center" align="center" vertical>
        <CgAlignLeft
          style={{
            fontSize: 18,
          }}
        />
        Left
      </Flex>
    ),
  },
  {
    value: 'R',
    label: (
      <Flex gap="small" justify="center" align="center" vertical>
        <CgAlignRight
          style={{
            fontSize: 18,
          }}
        />
        Right
      </Flex>
    ),
  },
  {
    value: 'T',
    label: (
      <Flex gap="small" justify="center" align="center" vertical>
        <CgAlignTop
          style={{
            fontSize: 18,
          }}
        />
        Top
      </Flex>
    ),
  },
  {
    value: 'B',
    label: (
      <Flex gap="small" justify="center" align="center" vertical>
        <CgAlignBottom
          style={{
            fontSize: 18,
          }}
        />
        Bottom
      </Flex>
    ),
  },
  {
    value: 'C',
    label: (
      <Flex gap="small" justify="center" align="center" vertical>
        <CgAlignCenter
          style={{
            fontSize: 18,
          }}
        />
        Center
      </Flex>
    ),
  },
];

const BarcodeTemplateSetup = () => {
  const formRef = useRef(null);
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');

  const { SadminuserAccess } = useAuth();
  const SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Barcode / QR'
  );
  // useDispatch
  const dispatch = useDispatch();

  // useState
  const [dropdownValue, setDropdownValue] = useState();
  const [coresdata, setCoresdata] = useState([]);
  const [filteredCoreData, setFilteredCoreData] = useState([]);
  const [value, setValue] = useState();
  const [secondValue, setSecondValue] = useState();
  const [sizeCheckList, setSizeCheckList] = useState([]);
  const [checkedList, setCheckedList] = useState([]);
  const [selectedOption, setSelectedOption] = useState('B');
  const checkAll =
    sizeCheckList?.filter(
      (filter) =>
        filter.ComponentName !== (selectedOption === 'B' ? 'Qrcode' : 'Barcode')
    )?.length === checkedList?.length;
  const [selectedSizeCheckedValues, setSelectedSizeCheckedValues] = useState(
    []
  );
  const [sizeName, setSizeName] = useState(null);
  const [message, setMessage] = useState({ Type: null, Message: null });
  const [editMode, setEditMode] = useState(false);
  const [putMode, setPutMode] = useState(false);
  const [editinitialRun, setEditInitialRun] = useState(false);
  const [getSizeData, setGetSizeData] = useState([]);
  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);
  const secondValueStyle = {
    flexDirection: secondValue === 'R' ? 'row' : 'row-reverse',
  };
  const valueStyleRow = {
    flexDirection: value === 'R' ? 'row' : 'row-reverse',
  };
  const valueStyleColumn = {
    flexDirection: value === 'T' ? 'column' : 'column-reverse',
  };
  const [showAll, setShowAll] = useState(false);
  const displayedData = showAll
    ? filteredCoreData
    : filteredCoreData.slice(0, 6);

  const columns = [
    {
      title: 'Sl.No',
      align: 'center',
      key: 'sno',
      width: '50px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
    },
    {
      title: 'Size',
      dataIndex: 'SessionName',
      key: 'SessionName',
      width: '50px',
      align: 'left',
      render: (text) => <a style={{ color: 'black' }}>{text}</a>,
    },
    {
      title: 'Options',
      dataIndex: 'OptionDetails',
      key: 'OptionDetails',
      width: '100px',
      align: 'left',
      render: (OptionDetails) => (
        <a style={{ color: 'black' }}>
          {OptionDetails?.map((item) => item.OptionName).join(',')}
        </a>
      ),
      ellipsis: true,
    },
    {
      title: 'Action',
      dataIndex: 'Action',
      width: '50px',
      key: 'Action',
      render: (_, record, index) =>
        getSizeData?.length >= 1 ? (
          <Space size="middle">
            <a>
              <EditFilled
                style={{ color: '#1292EE' }}
                onClick={() =>
                  UserType === 'Super Admin' ||
                  (UserType === 'Super Admin User' &&
                    SAAccessCommonMaster?.UpdateAccess === 'Y') ||
                  (UserType === 'Employee' && empData?.UpdateAccess === 'Y') ||
                  UserType === 'Admin'
                    ? actionsFormatter(record, index)
                    : null
                }
              />
            </a>
            <a
              onClick={() => {
                if (
                  !editMode &&
                  (UserType === 'Super Admin' ||
                    (UserType === 'Super Admin User' &&
                      SAAccessCommonMaster?.DeleteAccess === 'Y') ||
                    (UserType === 'Employee' &&
                      empData?.DeleteAccess === 'Y') ||
                    UserType === 'Admin')
                ) {
                  const filteredData = getSizeData?.filter(
                    (_, ind) => ind !== index
                  );
                  setGetSizeData(filteredData);
                  const updatedCoresData = [...coresdata]?.filter(
                    (filter) =>
                      !filteredData.some(
                        (some) => some.SessionId === filter.ConfigId
                      )
                  );
                  setFilteredCoreData(updatedCoresData);
                } else {
                  return '';
                }
              }}
            >
              <DeleteFilled
                style={{
                  color: '#FF4D4F',
                  pointerEvents: editMode ? 'none' : 'auto',
                }}
              />
            </a>
          </Space>
        ) : null,
    },
  ];

  // useCallback
  const onComplete = useCallback(() => {
    setMessage({ Type: null, Message: null });
  }, []);

  // useEffect
  useEffect(() => {
    dispatch(changeBreadCrumb({ items: items }));
    getBarcodeSessionData();
  }, []);
  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);

  useEffect(() => {
    let hasAccess = false;

    if (UserType === 'Admin' || UserType === 'Super Admin') {
      hasAccess = true;
    } else if (UserType === 'Employee') {
      hasAccess =
        empData?.AddAccess === 'Y' ||
        SAAccessCommonMaster?.UpdateAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      hasAccess =
        SAAccessCommonMaster?.AddAccess === 'Y' ||
        SAAccessCommonMaster?.UpdateAccess === 'Y';
    }

    setaddnewAccess(!hasAccess);
  }, [empData, SAAccessCommonMaster, UserType]);

  const fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
      (item) => item.ConfigName === 'Barcode / QR'
    );
    setEmpData(datas?.[0]);
  };

  useEffect(() => {
    if (dropdownValue !== undefined && dropdownValue !== null) {
      const name = coresdata?.find(
        (find) => find.ConfigId === dropdownValue
      )?.ConfigName;
      setSizeName(name);
    }
  }, [dropdownValue]);

  useEffect(() => {
    if (editMode && editinitialRun) {
      const { radioValue, secondRadioValue, arrayValue, secondArrayValue } =
        getPositionOptions(true);
      if (
        sizeName === '50X30 Single' ||
        sizeName === '50X25 Single' ||
        (sizeName === '100X150' && editinitialRun)
      ) {
        secondArrayValue !== undefined && secondArrayValue?.length > 0
          ? setSecondValue(secondRadioValue)
          : setSecondValue();
        arrayValue !== undefined && arrayValue?.length > 0
          ? setValue(radioValue)
          : setValue();
      } else {
        arrayValue !== undefined && arrayValue?.length > 0
          ? (setValue(radioValue), setSecondValue())
          : (setValue(), setSecondValue());
      }
    } else if (!editMode) {
      const { radioValue, secondRadioValue, arrayValue, secondArrayValue } =
        getPositionOptions(true);
      if (
        sizeName === '50X30 Single' ||
        sizeName === '50X25 Single' ||
        sizeName === '100X150'
      ) {
        secondArrayValue !== undefined &&
          secondArrayValue?.length > 0 &&
          setSecondValue(secondRadioValue);
        arrayValue !== undefined && arrayValue?.length > 0
          ? setValue(radioValue)
          : setValue();
      } else {
        arrayValue !== undefined && arrayValue?.length > 0
          ? (setValue(radioValue), setSecondValue())
          : (setValue(), setSecondValue());
      }
    } else {
      setEditInitialRun(true);
    }
  }, [sizeName, selectedSizeCheckedValues]);

  const onChangeFirst = (e) => {
    setValue(e?.target?.value);
  };

  const onChangeSecondValue = (e) => {
    setSecondValue(e?.target?.value);
  };

  const actionsFormatter = async (record) => {
    const { SessionId, OptionDetails, Position, PositionString, CodeType } =
      record;
    setEditMode(true);
    const updatedCoresData = [...coresdata]?.filter(
      (filter) => filter.ConfigId === SessionId
    );
    setFilteredCoreData(updatedCoresData);
    setSelectedOption(CodeType);
    setEditInitialRun(false);
    setDropdownValue(SessionId);
    formRef?.current?.setFieldsValue({ Cross: SessionId });
    const response = await dispatch(
      globalBarcode.getBarcodeComponentsBasedOnSessionId(SessionId)
    ).unwrap();

    if (response?.data?.statusCode === 1) {
      setSizeCheckList(response?.data?.data);
      const checkedData = OptionDetails?.map((item) => item.OptionId);
      setSelectedSizeCheckedValues(checkedData);
      setCheckedList(checkedData);
      setValue(Position !== '' ? Position : undefined);
      setSecondValue(PositionString !== '' ? PositionString : undefined);
    } else {
      setMessage({ Type: 'error', Message: response?.data?.response });
    }
  };

  const CoresOnChange = async (params) => {
    setDropdownValue(params);
    formRef.current?.setFieldsValue({ Cross: params });
    if (params !== undefined && params !== null) {
      const response = await dispatch(
        globalBarcode.getBarcodeComponentsBasedOnSessionId(params)
      ).unwrap();
      if (response?.data?.statusCode === 1) {
        setSizeCheckList(response?.data?.data);
        const allCheckboxes = response?.data?.data
          .filter(
            (item) =>
              item.ComponentName !==
              (selectedOption === 'B' ? 'Qrcode' : 'Barcode')
          )
          .map((item) => item.ComponentId);
        setSelectedSizeCheckedValues(allCheckboxes);
        setCheckedList(allCheckboxes);

        const name = coresdata?.find(
          (find) => find.ConfigId === params
        )?.ConfigName;

        if (name === '22X35 3cross' || name === '25X50 2cross') {
          setValue('T'); // Default to Top
          setSecondValue(undefined);
        } else if (name === '100X13 (55MM Printable)') {
          setValue('L'); // Default to Left
          setSecondValue(undefined);
        } else if (name === '100X15 (70MM Printable)') {
          setValue('R'); // Default to Right
          setSecondValue(undefined);
        }
      } else {
        setMessage({ Type: 'error', Message: response?.data?.response });
      }
    }
  };

  const getBarcodeSessionData = async () => {
    let getResponse = await dispatch(
      globalBarcode.getBarcodeTemplate({
        compId: CompId,
        appId: AppId,
        branchId: BranchId,
      })
    ).unwrap();

    if (getResponse?.data?.statusCode === 1) {
      if (getResponse?.data?.data?.length > 0) {
        const { TemplateDetails } = getResponse?.data?.data?.[0];
        setPutMode(true);
        setGetSizeData(TemplateDetails);
      } else {
        setPutMode(false);
        setGetSizeData([]);
      }
    }

    let resp = await dispatch(globalBarcode.getBarcodeSessionsIDs()).unwrap();
    if (resp?.data?.statusCode === 1) {
      setCoresdata(resp?.data?.data);
      if (getResponse?.data?.data?.length === 0) {
        setFilteredCoreData(resp?.data?.data);
      } else {
        if (getResponse?.data?.data?.length > 0) {
          const { TemplateDetails } = getResponse?.data?.data?.[0];
          const filteredData = await resp?.data?.data?.filter(
            (filter) =>
              !TemplateDetails.some(
                (some) => some.SessionId === filter.ConfigId
              )
          );
          setFilteredCoreData(filteredData);
        }
      }
    } else {
      setCoresdata([]);
    }
  };

  const onCheckboxChange = (checkedValues) => {
    setCheckedList(checkedValues);
    setSelectedSizeCheckedValues(checkedValues);
  };

  const onCheckAllChange = (e) => {
    let Data = sizeCheckList
      ?.filter(
        (filter) =>
          filter.ComponentName !==
          (selectedOption === 'B' ? 'Qrcode' : 'Barcode')
      )
      .map((item) => item.ComponentId);
    setCheckedList(e.target.checked ? Data : []);
    setSelectedSizeCheckedValues(e.target.checked ? Data : []);
  };

  const getPositionOptions = () => {
    let result = {
      radioValue: '',
      secondRadioValue: '',
      arrayValue: [],
      secondArrayValue: [],
    };
    const componentMap = Object.fromEntries(
      sizeCheckList?.map((item) => [item.ComponentName, item.ComponentId]) || []
    );

    const checkComponent = (name) =>
      selectedSizeCheckedValues.includes(componentMap[name]);

    const mrp = checkComponent('MRP');
    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 filterByValues = (values) => {
      return positionOption?.filter((item) => values.includes(item.value));
    };

    const CTB = ['C', 'T', 'B'];
    const BT = ['B', 'T'];
    const LR = ['L', 'R'];
    const CT = ['C', 'T'];
    const CB = ['C', 'B'];
    const C = ['C'];
    const T = ['T'];
    const L = ['L'];
    const R = ['R'];

    switch (sizeName) {
      case '15X15 6cross':
      case '25X25 4cross':
        switch (sizeName) {
          case '15X15 6cross':
            if (mrp && productName) {
              result.arrayValue = filterByValues(CTB);
              result.secondArrayValue = [];
              result.radioValue = value || 'C';
              result.secondRadioValue = '';
            } else if (mrp) {
              result.arrayValue = filterByValues(CB);
              result.secondArrayValue = [];
              result.radioValue = (value === 'T' ? 'C' : value) || 'C';
              result.secondRadioValue = '';
            } else if (productName) {
              result.arrayValue = filterByValues(CT);
              result.secondArrayValue = [];
              result.radioValue = (value == 'B' ? 'T' : value) || 'T';
              result.secondRadioValue = '';
            } else {
              result.arrayValue = filterByValues(C);
              result.secondArrayValue = [];
              result.radioValue = 'C';
              result.secondRadioValue = '';
            }
            break;
          case '25X25 4cross':
            if ((mrp || productName) && (eDate || mDate)) {
              result.arrayValue = filterByValues(CTB);
              result.secondArrayValue = [];
              result.radioValue = value || 'C';
              result.secondRadioValue = '';
            } else if (eDate || mDate) {
              result.arrayValue = filterByValues(CB);
              result.secondArrayValue = [];
              result.radioValue = (value === 'T' ? 'C' : value) || 'C';
              result.secondRadioValue = '';
            } else if (mrp || productName) {
              result.arrayValue = filterByValues(CT);
              result.secondArrayValue = [];
              result.radioValue = (value == 'B' ? 'C' : value) || 'C';
              result.secondRadioValue = '';
            } else {
              result.arrayValue = filterByValues(C);
              result.radioValue = 'C';
              result.secondArrayValue = [];
              result.secondRadioValue = '';
            }
            break;
        }

        return result;
      case '22X35 3cross':
      case '25X50 2cross':
        switch (sizeName) {
          case '22X35 3cross':
            if (mrp) {
              result.arrayValue = filterByValues(BT);
              result.secondArrayValue = [];
              result.radioValue = value || 'T';
              result.secondRadioValue = '';
            } else {
              result.arrayValue = filterByValues(T);
              result.secondArrayValue = [];
              result.secondRadioValue = '';
              result.radioValue = 'T';
            }
            break;
          case '25X50 2cross':
            if (mrp || productName) {
              result.arrayValue = filterByValues(BT);
              result.secondArrayValue = [];
              result.radioValue = value || 'T';
              result.secondRadioValue = '';
            } else {
              result.arrayValue = filterByValues(T);
              result.secondArrayValue = [];
              result.radioValue = 'T';
              result.secondRadioValue = '';
            }
            break;
        }

        return result;
      case '50X30 Single':
      case '50X25 Single':
      case '100X150':
        switch (sizeName) {
          case '50X30 Single':
            if (mrp && (eDate || mDate || productName)) {
              result.arrayValue = filterByValues(BT);
              result.secondArrayValue = filterByValues(LR);
              result.radioValue = value || 'T';
              result.secondRadioValue = secondValue || 'R';
            } else if (mrp) {
              result.arrayValue = filterByValues(BT);
              result.radioValue = value || 'T';
              result.secondArrayValue = [];
              result.secondRadioValue = '';
            } else if (eDate || mDate || productName) {
              result.secondArrayValue = filterByValues(LR);
              result.secondRadioValue = secondValue || 'R';
              result.arrayValue = [];
              result.radioValue = '';
            } else {
              result.arrayValue = filterByValues(T);
              result.secondArrayValue = filterByValues(L);
              result.radioValue = 'T';
              result.secondRadioValue = 'L';
            }
            break;
          case '50X25 Single':
            if (mrp && mDate) {
              result.arrayValue = filterByValues(BT);
              result.secondArrayValue = filterByValues(LR);
              result.radioValue = value || 'T';
              result.secondRadioValue = secondValue || 'L';
            } else if (mrp) {
              result.arrayValue = filterByValues(BT);
              result.radioValue = value || 'T';
              result.secondArrayValue = [];
              result.secondRadioValue = '';
            } else if (mDate) {
              result.secondArrayValue = filterByValues(LR);
              result.secondRadioValue = secondValue || 'L';
              result.arrayValue = [];
              result.radioValue = '';
            } else {
              result.arrayValue = filterByValues(T);
              result.secondArrayValue = filterByValues(L);
              result.radioValue = 'T';
              result.secondRadioValue = 'L';
            }
            break;
          case '100X150':
            if (
              mrp &&
              (mDate || color || sellingPrice || eDate || productName)
            ) {
              result.arrayValue = filterByValues(BT);
              result.secondArrayValue = filterByValues(LR);
              result.radioValue = value || 'T';
              result.secondRadioValue = secondValue || 'R';
            } else if (mrp) {
              result.arrayValue = filterByValues(BT);
              result.radioValue = value || 'T';
              result.secondArrayValue = [];
              result.secondRadioValue = '';
            } else if (mDate || color || sellingPrice || eDate || productName) {
              result.secondArrayValue = filterByValues(LR);
              result.secondRadioValue = secondValue || 'R';
              result.arrayValue = [];
              result.radioValue = '';
            } else {
              result.arrayValue = filterByValues(T);
              result.secondArrayValue = filterByValues(L);
              result.radioValue = 'T';
              result.secondRadioValue = 'L';
            }
            break;
        }

        return result;
      case '100X15 (70MM Printable)':
      case '100X13 (55MM Printable)':
        switch (sizeName) {
          case '100X15 (70MM Printable)':
            if (mrp || sellingPrice || productName) {
              result.arrayValue = filterByValues(LR);
              result.secondArrayValue = [];
              result.radioValue = value || 'R';
              result.secondRadioValue = '';
            } else {
              result.arrayValue = filterByValues(R);
              result.secondArrayValue = [];
              result.radioValue = 'R';
              result.secondRadioValue = '';
            }
            break;
          case '100X13 (55MM Printable)':
            if (sellingPrice || productName) {
              result.arrayValue = filterByValues(LR);
              result.secondArrayValue = [];
              result.radioValue = value || 'L';
              result.secondRadioValue = '';
            } else {
              result.arrayValue = filterByValues(L);
              result.secondArrayValue = [];
              result.radioValue = 'L';
              result.secondRadioValue = '';
            }
            break;
        }
        return result;
      default:
        return [];
    }
  };

  const renderBarcodePositionOptions = () => {
    const positionOptions = getPositionOptions();
    const { arrayValue = [], secondArrayValue = [] } = positionOptions || {};

    const isBarcodeSelected = selectedSizeCheckedValues?.includes(
      sizeCheckList?.find((item) => item.ComponentName === 'Barcode')
        ?.ComponentId
    );
    const isQrcodeSelected = selectedSizeCheckedValues?.includes(
      sizeCheckList?.find((item) => item.ComponentName === 'Qrcode')
        ?.ComponentId
    );

    const isSpecialSize = ['50X30 Single', '50X25 Single', '100X150'].includes(
      sizeName
    );
    const hasOptions = arrayValue.length > 0 || secondArrayValue.length > 0;

    if (
      selectedSizeCheckedValues?.length > 0 &&
      (isBarcodeSelected || isQrcodeSelected)
    ) {
      if (isSpecialSize && hasOptions) {
        return (
          <div className="BQprintSelectCheckBox1">
            <div>{barCodePositionText}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              {arrayValue.length > 0 && (
                <Radio.Group
                  onChange={onChangeFirst}
                  value={value}
                  options={arrayValue}
                  className="widthDisplayJustifyContent"
                />
              )}
              {arrayValue.length > 0 && secondArrayValue.length > 0 && (
                <div style={{ borderRight: '1px solid #000' }}></div>
              )}
              {secondArrayValue.length > 0 && (
                <Radio.Group
                  onChange={onChangeSecondValue}
                  value={secondValue}
                  options={secondArrayValue}
                  className="widthDisplayJustifyContent"
                />
              )}
            </div>
          </div>
        );
      } else if (!isSpecialSize && arrayValue.length > 0) {
        return (
          <div className="BQprintSelectCheckBox1">
            <div>{barCodePositionText}</div>
            <Radio.Group
              onChange={onChangeFirst}
              value={value}
              options={arrayValue}
              className="widthDisplayJustifyContent"
            />
          </div>
        );
      }
    }
    return null;
  };

  const onFinish = async () => {
    const data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      TemplateDetails: getSizeData,
      CreatedBy: UserId,
    };

    if (putMode) {
      if (data?.TemplateDetails?.length === 0) {
        setFilteredCoreData([...coresdata]);
      }
      const response = await dispatch(
        globalBarcode.putBarcodeTemplate(data)
      ).unwrap();
      if (response?.data?.statusCode === 1) {
        setMessage({ Type: 'success', Message: response?.data?.response });
        setEditInitialRun(false);
        setPutMode(false);
        getBarcodeSessionData();
      } else {
        setMessage({ Type: 'error', Message: response?.data?.response });
      }
    } else {
      if (getSizeData?.length > 0) {
        const response = await dispatch(
          globalBarcode.postBarcodeTemplate(data)
        ).unwrap();
        if (response?.data?.statusCode === 1) {
          setMessage({ Type: 'success', Message: response?.data?.response });
          setEditInitialRun(false);
          setPutMode(false);
          getBarcodeSessionData();
        } else {
          setMessage({ Type: 'error', Message: response?.data?.response });
        }
      } else {
        setMessage({ Type: 'error', Message: 'Please Setup a Barcode' });
      }
    }
  };

  const handleCancel = (sizeData) => {
    setSelectedOption('B');
    setEditMode(false);
    setEditInitialRun(false);
    setSizeCheckList([]);
    setSelectedSizeCheckedValues([]);
    setCheckedList([]);
    setDropdownValue();
    formRef?.current?.resetFields();
    const updatedCoresData = [...coresdata]?.filter(
      (filter) => !sizeData.some((some) => some.SessionId === filter.ConfigId)
    );
    setFilteredCoreData(updatedCoresData);
  };

  const handleSizeAddOrSave = () => {
    const optionDetails = selectedSizeCheckedValues.map((item) => {
      const { ComponentName } = sizeCheckList?.find(
        (find) => find.ComponentId === item
      );
      return {
        OptionName: ComponentName,
        OptionId: item,
      };
    });
    let updatedSizeData = [];

    if (editMode) {
      setGetSizeData((prev) => {
        updatedSizeData = prev?.map((item) => {
          if (item.SessionId === dropdownValue) {
            return {
              ...item,
              Position: value !== undefined ? value : '',
              PositionString: secondValue !== undefined ? secondValue : '',
              OptionDetails: optionDetails,
              CodeType: selectedOption,
            };
          }
          return item;
        });
        return updatedSizeData;
      });

      const updatedCoresData = [...coresdata]?.filter(
        (filter) => filter.ConfigId === dropdownValue
      );
      setFilteredCoreData(updatedCoresData);
    } else {
      const { ConfigName } = coresdata?.find(
        (find) => find.ConfigId === dropdownValue
      );

      setGetSizeData((prev) => {
        updatedSizeData = [
          ...prev,
          {
            SessionId: dropdownValue,
            CodeType: selectedOption,
            Position: value !== undefined ? value : '',
            PositionString: secondValue !== undefined ? secondValue : '',
            OptionDetails: optionDetails,
            SessionName: ConfigName,
          },
        ];
        return updatedSizeData;
      });

      const updatedCoresData = [...coresdata]?.filter(
        (filter) =>
          !updatedSizeData.some((some) => some.SessionId === filter.ConfigId)
      );
      setFilteredCoreData(updatedCoresData);
    }

    handleCancel(updatedSizeData);
  };

  const handleImageTag = (w, h = '40px') => {
    return (
      <img
        src={selectedOption === 'B' ? barCodeImage : qrCodeImage}
        alt={previewText}
        width={w}
        height={h}
      />
    );
  };

  const handleChangeOption = (param) => {
    setSelectedOption(param);
    // Select all checkboxes for the new code type
    if (sizeCheckList?.length > 0) {
      const allCheckboxes = sizeCheckList
        .filter(
          (item) =>
            item.ComponentName !== (param === 'B' ? 'Qrcode' : 'Barcode')
        )
        .map((item) => item.ComponentId);
      setCheckedList(allCheckboxes);
      setSelectedSizeCheckedValues(allCheckboxes);
    }
  };

  const [rightClickCount, setRightClickCount] = useState(0);
  const [clickCount, setClickCount] = useState(0);

  const leftOnclick = () => {
    if (!dropdownValue || filteredCoreData.length === 0) return;

    setClickCount(0);
    const currentIndex = filteredCoreData.findIndex(
      (item) => item.ConfigId === dropdownValue
    );
    if (currentIndex > 0) {
      CoresOnChange(filteredCoreData[currentIndex - 1].ConfigId);
    } else {
      CoresOnChange(filteredCoreData[filteredCoreData.length - 1].ConfigId);
    }
  };

  const RightOnclick = () => {
    if (!dropdownValue || filteredCoreData.length === 0) return;
    const newClickCount = clickCount + 1;
    setClickCount(newClickCount);
    if (newClickCount >= 6 && filteredCoreData.length > 6) {
      setShowAll(true);
      setClickCount(0);
    }
    const currentIndex = filteredCoreData.findIndex(
      (item) => item.ConfigId === dropdownValue
    );
    if (currentIndex < filteredCoreData.length - 1) {
      CoresOnChange(filteredCoreData[currentIndex + 1].ConfigId);
    } else {
      CoresOnChange(filteredCoreData[0].ConfigId);
      setClickCount(0);
    }
  };

  useEffect(() => {
    setClickCount(0);
  }, [showAll]);

  useEffect(() => {
    if (filteredCoreData?.length > 0 && !dropdownValue && !editMode) {
      CoresOnChange(filteredCoreData[0].ConfigId);
    }
  }, [filteredCoreData]);

  useEffect(() => {
    if (dropdownValue && !editMode) {
      const currentSize = coresdata?.find(
        (find) => find.ConfigId === dropdownValue
      )?.ConfigName;

      if (currentSize === '22X35 3cross' || currentSize === '25X50 2cross') {
        setSecondValue(undefined);
      } else if (currentSize === '100X13 (55MM Printable)') {
        setSecondValue(undefined);
      } else if (currentSize === '100X15 (70MM Printable)') {
        setSecondValue(undefined);
      }
    }
  }, [dropdownValue, coresdata, editMode]);

  return (
    <div className="BarcodeTemplateSetup-Master">
      <Messages
        messageType={message.Type}
        messageData={message.Message}
        onComplete={onComplete}
      />
      <div className="defaluBSPSSetupHeadder">
        <h1>
          <IoBarcodeOutline color="#2563eb" size={27} /> Barcode /{' '}
          <IoQrCodeOutline color="#2563eb" size={20} />
          Qr Setup
        </h1>
        <p>Easily configure barcode and QR code settings for your products</p>
      </div>

      <div className="defaluBSPSSetup-main">
        <div className="defaluBSPSSetup">
          <p style={{ lineHeight: '1', fontSize: '14px', fontWeight: '500' }}>
            {' '}
            Scan Setup
          </p>
          <Form ref={formRef}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'flex-start',
                gap: '1rem',
              }}
            >
              <div>
                <Segmented
                  size={'large'}
                  defaultValue="B"
                  // disabled
                  value={selectedOption}
                  onChange={(value) => handleChangeOption(value)}
                  //   options={[
                  //     {
                  //       label: (
                  //         <div style={segmentStyle}>
                  //           <div>Barcode</div>
                  //           <RiBarcodeFill size={25} />
                  //         </div>
                  //       ),
                  //       value: 'B',
                  //     },
                  //     {
                  //       value: 'Q',
                  //       label: (
                  //         <div style={segmentStyle}>
                  //           <div>Qr code</div>
                  //           <BsQrCode size={25} />
                  //         </div>
                  //       ),
                  //     },
                  //   ]}
                  options={[
                    {
                      label: (
                        <div style={segmentStyle}>
                          <div
                            style={{
                              color:
                                selectedOption === 'B' ? '#000' : '#afafaf',
                            }}
                          >
                            Barcode
                          </div>
                          <RiBarcodeFill
                            style={{
                              color:
                                selectedOption === 'B' ? '#000' : '#afafaf',
                            }}
                            size={25}
                          />
                        </div>
                      ),
                      value: 'B',
                    },
                    {
                      value: 'Q',
                      label: (
                        <div style={segmentStyle}>
                          <div
                            style={{
                              color:
                                selectedOption === 'Q' ? '#000' : '#afafaf',
                            }}
                          >
                            Qr code
                          </div>
                          <BsQrCode
                            style={{
                              color:
                                selectedOption === 'Q' ? '#000' : '#afafaf',
                            }}
                            size={25}
                          />
                        </div>
                      ),
                    },
                  ]}
                />
              </div>
            </div>
            <br />
            {/* {(filteredCoreData?.length > 0 || editMode) && <div className="BQprintSelect">
                <Form.Item
                  name="Cross"
                >
                  <DropDowns
                    options={[
                      ...filteredCoreData.map(option => ({
                        value: option.ConfigId,
                        label: option.ConfigName,
                      })),
                    ]}
                    placeholder="Please Enter Cross"
                    label={<label className="required">Size</label>}
                    className='field-DropDown'
                    isOnchanges={dropdownValue !== undefined ? true : false}
                    onChangeFunction={(e) => CoresOnChange(e)}
                    valueData={dropdownValue}
                    disabled={editMode}
                  />
                </Form.Item>
              </div>} */}

            {(filteredCoreData?.length > 0 || editMode) && (
              <div className="BQprintSelect">
                <Form.Item name="Cross">
                  <label className="required">Size</label>
                  <div className="image-select-grid">
                    {displayedData.map((item) => {
                      const isSelected = dropdownValue === item.ConfigId;
                      const isDisabled = editMode;

                      return (
                        <div
                          key={item.ConfigId}
                          className={`image-option ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}`}
                          onClick={() => {
                            if (!isDisabled) {
                              CoresOnChange(item.ConfigId);
                            }
                          }}
                        >
                          {' '}
                          <img
                            src={selectedOption === 'B' ? BarCode : QrCode}
                            alt={item.ConfigName}
                          />
                          <span>{item.ConfigName}</span>
                        </div>
                      );
                    })}
                  </div>

                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'center',
                      cursor: 'pointer',
                      marginTop: '10px',
                      color: 'rgb(24, 144, 255)',
                      alignItems: 'center',
                    }}
                  >
                    {filteredCoreData.length > 4 && (
                      <div
                        className="toggle-button"
                        onClick={() => setShowAll(!showAll)}
                      >
                        {showAll ? (
                          <>
                            Show Less <FaAngleUp />
                          </>
                        ) : (
                          <>
                            View All <FaAngleDown />
                          </>
                        )}
                      </div>
                    )}
                  </div>
                </Form.Item>
              </div>
            )}

            {dropdownValue !== undefined && (
              <div className="BQprintSelectCheckBox">
                <Checkbox onChange={onCheckAllChange} checked={checkAll}>
                  Select All
                </Checkbox>
                <Checkbox.Group
                  onChange={onCheckboxChange}
                  value={selectedSizeCheckedValues}
                >
                  <Row>
                    {sizeCheckList
                      ?.filter(
                        (filter) =>
                          filter.ComponentName !==
                          (selectedOption === 'B' ? 'Qrcode' : 'Barcode')
                      )
                      ?.map((value) => {
                        let tooltipText = null;

                        if (value.ComponentName === 'E Date') {
                          tooltipText = 'This is the expiry date.';
                        } else if (value.ComponentName === 'M Date') {
                          tooltipText = 'This is the manufacturing date.';
                        }

                        return (
                          <Checkbox
                            style={{ padding: '12px' }}
                            value={value.ComponentId}
                            key={value.ComponentId}
                          >
                            {tooltipText ? (
                              <Tooltip title={tooltipText}>
                                <span>{value.ComponentName}</span>
                              </Tooltip>
                            ) : (
                              value.ComponentName
                            )}
                          </Checkbox>
                        );
                      })}
                  </Row>
                </Checkbox.Group>
              </div>
            )}
            {renderBarcodePositionOptions()}
            {selectedSizeCheckedValues?.length > 0 &&
              dropdownValue !== undefined && (
                <div
                  style={{
                    width: '100%',
                    display: 'flex',
                    justifyContent: 'flex-start',
                    gap: '1rem',
                    margin: '0.5rem 0rem',
                  }}
                >
                  <div className="sizesavebutton" onClick={handleSizeAddOrSave}>
                    {editMode ? 'Update ' : 'Add'}
                  </div>
                  {editMode && (
                    <div
                      className="sizeCancelbutton"
                      onClick={() => handleCancel(getSizeData)}
                    >
                      {' '}
                      Cancel{' '}
                    </div>
                  )}
                </div>
              )}
          </Form>
          {getSizeData?.length > 0 && (
            <div className="component-table">
              <Tables
                columns={columns}
                data={getSizeData}
                dataSource={getSizeData}
              />
            </div>
          )}
          {!editMode && (
            <div className="buttonStyle">
              <Buttons
                icon={<ArrowRightOutlined />}
                buttonText={'Submit'}
                color="901D77"
                handleSubmit={onFinish}
                disabled={addnewAccess}
              />
            </div>
          )}
        </div>
        {/* sree */}

        {/* Preview Section */}
        <div className="CustomisedBSPS">
          <div className="headerPreview">PREVIEW</div>
          <Button
            icon={<LeftOutlined />}
            onClick={() => leftOnclick()}
            style={{
              position: 'absolute',
              top: '40%',
              left: '5px',
              zIndex: 2,
              width: '40px',
              height: '40px',
              fontWeight: 'bold',
              borderRadius: '50%',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
            }}
          />
          <Button
            icon={<RightOutlined />}
            onClick={() => RightOnclick()}
            style={{
              position: 'absolute',
              top: '40%',
              right: '5px',
              zIndex: 2,
              width: '40px',
              height: '40px',
              fontWeight: 'bold',
              borderRadius: '50%',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
            }}
          />
          {(() => {
            const componentMap = Object.fromEntries(
              sizeCheckList?.map((item) => [
                item.ComponentName,
                item.ComponentId,
              ]) || []
            );

            // Define constants using the lookup map
            const checkComponent = (name) =>
              selectedSizeCheckedValues.includes(componentMap[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 = selectedOption === 'B';
            switch (sizeName) {
              case '15X15 6cross':
                return (
                  //"C", "T", "B"
                  !(productName || barcode || qrcode || mrp) ? (
                    <Empty />
                  ) : (
                    <>
                      <div className="SixCross15x">
                        {[...Array(6)].map((_, index) => (
                          <div className="BarQrprint5">
                            <div
                              key={index}
                              className="BarQrprint1details BarQrprint5Details alignCenterFlexDirectionColumn"
                            >
                              {(barcode || qrcode) &&
                                value === 'T' &&
                                handleImageTag(barcodeOrQr ? 50 : 20, 20)}
                              {productName && (
                                <div className="productNameBQ">
                                  {productNameText}
                                </div>
                              )}
                              {(barcode || qrcode) &&
                                value === 'C' &&
                                handleImageTag(barcodeOrQr ? 50 : 20, 20)}
                              {mrp && <div className="MRPBQ">{mrpText}</div>}
                              {(barcode || qrcode) &&
                                value === 'B' &&
                                handleImageTag(barcodeOrQr ? 50 : 20, 20)}
                            </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>
                    </>
                  )
                );
              case '22X35 3cross':
                return (
                  //"B","T"
                  !(barcode || qrcode || mrp) ? (
                    <Empty />
                  ) : (
                    <>
                      <div className="Cross32235">
                        {[...Array(3)].map((_, index) => (
                          <div className="BarQrprint4" key={index}>
                            <div
                              className="BarQrprint1details"
                              style={{
                                alignItems: 'center',
                                flexDirection:
                                  value === 'T' ? 'column' : 'column-reverse',
                              }}
                            >
                              {(barcode || qrcode) &&
                                handleImageTag(barcodeOrQr ? 100 : 35, 35)}
                              {(productName || mrp) && (
                                <div style={{ textAlign: 'center' }}>
                                  {productName && (
                                    <div className="MRPBQ">
                                      {productNameText}
                                    </div>
                                  )}
                                  {mrp && (
                                    <div className="MRPBQ">{mrpText}</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>
                    </>
                  )
                );
              case '25X25 4cross':
                return (
                  //"C", "T", "B"
                  !(
                    productName ||
                    mDate ||
                    eDate ||
                    barcode ||
                    qrcode ||
                    mrp
                  ) ? (
                    <Empty />
                  ) : (
                    // 4 Cross idhu 25 * 25 * 25 * 25 = 1 inch
                    <>
                      <div className="Cross4Print">
                        {[...Array(4)].map((_, index) => (
                          <div key={index} className="BarQrprint3">
                            <div className="BarQrprint1details alignCenterFlexDirectionColumn">
                              {(barcode || qrcode) &&
                                value === 'T' &&
                                handleImageTag(barcodeOrQr ? 60 : 35, 35)}
                              {productName && (
                                <div className="productNameBQ">
                                  {productNameText}
                                </div>
                              )}
                              {mrp && <div className="MRPBQ">{mrpText}</div>}
                              {(barcode || qrcode) &&
                                value === 'C' &&
                                handleImageTag(barcodeOrQr ? 60 : 35, 35)}
                              {mDate && <div className="MandateBQ"></div>}
                              {eDate && (
                                <div className="ExpdateBQ">DD-MM-YYYY</div>
                              )}
                              {(barcode || qrcode) &&
                                value === 'B' &&
                                handleImageTag(barcodeOrQr ? 60 : 35, 35)}
                            </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 (
                  //"B","T"
                  !(productName || barcode || qrcode || mrp) ? (
                    <Empty />
                  ) : (
                    <>
                      <div className="TwoCrosssmain">
                        {[...Array(2)].map((_, index) => (
                          <div className="BarQrprint8">
                            <div
                              key={index}
                              className="Barcodeimage"
                              style={valueStyleColumn}
                            >
                              {(barcode || qrcode) &&
                                handleImageTag(barcodeOrQr ? 140 : 30, 30)}
                              {productName && (
                                <div className="productNameBQ">
                                  {productNameText}
                                </div>
                              )}
                              {mrp && <div className="MRPBQ">{mrpText}</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>
                    </>
                  )
                );
              case '50X30 Single':
                return !(
                  productName ||
                  mDate ||
                  eDate ||
                  barcode ||
                  qrcode ||
                  mrp
                ) ? (
                  <Empty />
                ) : (
                  <>
                    <div className="BarQrprint6" style={secondValueStyle}>
                      <div className="BarQrprint1details flexDirection">
                        {productName && (
                          <div className="productNameBQ">{productNameText}</div>
                        )}
                        {mDate && <div className="MandateBQ">{mDateText}</div>}
                        {eDate && <div className="ExpdateBQ">{eDateText}</div>}
                      </div>
                      <div
                        className="Barcodeimage flexDirection"
                        style={valueStyleColumn}
                      >
                        {(barcode || qrcode) &&
                          handleImageTag(barcodeOrQr ? 70 : 35, 35)}
                        {mrp && <div className="MRPBQ">{mrpText}</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>
                  </>
                );
              case '50X25 Single':
                return !(productName || mDate || barcode || qrcode || mrp) ? (
                  <Empty />
                ) : (
                  <>
                    <div className="BarQrprint2" style={secondValueStyle}>
                      <div className="BarQrprint1details flexDirection">
                        {productName && (
                          <div className="productNameBQ">{productNameText}</div>
                        )}
                        {mDate && <div className="MandateBQ">{mDateText}</div>}
                      </div>
                      <div className="Barcodeimage" style={valueStyleColumn}>
                        {(barcode || qrcode) &&
                          handleImageTag(barcodeOrQr ? 70 : 35, 35)}
                        {mrp && <div className="MRPBQ">{mrpText}</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>
                  </>
                );
              case '100X13 (55MM Printable)':
                return (
                  //"C", "T", "B"
                  !(productName || sellingPrice || barcode || qrcode) ? (
                    <Empty />
                  ) : (
                    <>
                      <div className="BarQrprint9" style={valueStyleRow}>
                        {(barcode || qrcode) &&
                          handleImageTag(barcodeOrQr ? 140 : 35, 35)}
                        <div className="BarQrprint1details1">
                          {productName && (
                            <div className="productNameBQ">
                              {productNameText}
                            </div>
                          )}
                          {sellingPrice && (
                            <div className="SellingpriceBQ">
                              {sellingPriceText}
                            </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>
                    </>
                  )
                );
              case '100X15 (70MM Printable)':
                return (
                  // "L","R"
                  !(productName || sellingPrice || barcode || qrcode || mrp) ? (
                    <Empty />
                  ) : (
                    <>
                      <div className="BarQrprint1" style={valueStyleRow}>
                        <div className="BarQrprint1details flexDirection">
                          {productName && (
                            <div className="productNameBQ">
                              {productNameText}
                            </div>
                          )}
                          {mrp && <div className="MRPBQ">{mrpText}</div>}
                          {sellingPrice && (
                            <div className="SellingpriceBQ">
                              {sellingPriceText}
                            </div>
                          )}
                        </div>
                        <div className="Qrcodeimage">
                          {(barcode || qrcode) &&
                            handleImageTag(barcodeOrQr ? 120 : 40)}
                        </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 !(
                  productName ||
                  sellingPrice ||
                  mDate ||
                  eDate ||
                  color ||
                  barcode ||
                  qrcode ||
                  mrp
                ) ? (
                  <Empty />
                ) : (
                  <>
                    <div className="BarQrprint7" style={secondValueStyle}>
                      <div className="BarQrprint1details1">
                        {productName && (
                          <div className="productNameBQ">{productNameText}</div>
                        )}
                        {sellingPrice && (
                          <div className="SellingpriceBQ">
                            {sellingPriceText}
                          </div>
                        )}
                        {mDate && <div className="MandateBQ">{mDateText}</div>}
                        {eDate && <div className="ExpdateBQ">{eDateText}</div>}
                        {color && <div className="ColorBQ">{colorText}</div>}
                      </div>
                      <div className="Barcodeimage" style={valueStyleColumn}>
                        {(barcode || qrcode) &&
                          handleImageTag(barcodeOrQr ? 140 : 35, 35)}
                        {mrp && <div className="MRPBQ">{mrpText}</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>{sizeCheckList[0]?.SessionName}</p>
        </div>
      </div>
    </div>
  );
};

export default BarcodeTemplateSetup;