import { Checkbox, Form, Modal, Row } from 'antd';
import { DropDowns } from '../../../../Components/Forms/DropDown';
import { InputField } from '../../../../Components/Forms/InputField';
import { validateSafeInput } from '../../../../Services/Others';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import { CloseOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { IoMdAdd } from 'react-icons/io';
import { useCallback, useEffect, useState } from 'react';
import { SwatchesPicker } from 'react-color';
import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup';
import { useSelector } from 'react-redux';
import {
  getSalesTemplate,
  getTemplate,
  postColorData,
  postTableFontData,
  putSelectionComponentData,
  StoredSessionData,
} from '../../../../Features/ThemeChange/ThemeChange';
import { useDispatch } from 'react-redux';
import Buttons from '../../../../Components/Forms/Buttons';
import { Messages } from '../../../../Components/Notifications/Messages';
import './AllSalesPageSettings.scss';

const TableHeadersetting = ({ setModalOpen }) => {
  const dispatch = useDispatch();
  const SessionData = useSelector(StoredSessionData);
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [TemplateDetails, setTemplateDetails] = useState([]);
  const [TableFontData, setTableFontData] = useState([
    { FontId: 1, SessionFont: 'Arial' },
    { FontId: 2, SessionFont: 'Roboto' },
    { FontId: 3, SessionFont: 'Open Sans' },
    { FontId: 4, SessionFont: 'Lato' },
    { FontId: 5, SessionFont: 'Montserrat' },
  ]);
  const [selectedTableFont, setSelectedTableFont] = useState();
  console.log(selectedTableFont, 'selectedTableFontselectedTableFont');
  const [TableFontModelopen, setTableFontModelopen] = useState(false);
  const [SelectedTableColor, setSelectedTableColor] = useState(null);
  const [Tableform] = Form.useForm();
  const [billingSettings, setBillingSettings] = useState();
  console.log(billingSettings, 'billingSettingsbillingSettings');
  const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
    useState([]);
  const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find(
    (item) => item?.OptionName === 'Background'
  )?.OptionId;

  const hasBackground =
    SelectedBillTableCheckValues?.includes(backgroundOptionId);
  const OverallbackgroundOptionId =
    billingSettings?.ComponentOptionsDetails?.find(
      (item) => item?.OptionName === 'OverallBackground'
    )?.OptionId;

  const hasOverallBackground = SelectedBillTableCheckValues?.includes(
    OverallbackgroundOptionId
  );
  // Hold and addcustomer OptionsDetails
  const [HoldButton, setHoldButton] = useState(false);
  const [AddCustomerButton, setAddCustomerButton] = useState(false);
  const [DineInChecked, setDineInChecked] = useState(false);
  console.log(billingSettings, 'billingSettingsbillingSettings');
  const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
    {
      ColorId: 4,
      SessionId: 55,
      OptionId: 108,
      FontColor: '#000000',
      BackgroundColor: '#f06292',
      ThemeName: 'Theme 4',
      ActiveStatus: 'A',
    },
    {
      ColorId: 14,
      SessionId: 55,
      OptionId: 108,
      FontColor: '#000000',
      BackgroundColor: '#52C41A',
      ThemeName: 'Theme 14',
      ActiveStatus: 'A',
    },
    {
      ColorId: 23,
      SessionId: 55,
      OptionId: 108,
      FontColor: '#000000',
      BackgroundColor: '#0d47a1',
      ThemeName: 'Theme 23',
      ActiveStatus: 'A',
    },
    {
      ColorId: 25,
      SessionId: 55,
      OptionId: 108,
      FontColor: '#000000',
      BackgroundColor: '#f8bbd0',
      ThemeName: 'Theme 25',
      ActiveStatus: 'A',
    },
    {
      ColorId: 29,
      SessionId: 55,
      OptionId: 108,
      FontColor: '#000000',
      BackgroundColor: '#ffcdd2',
      ThemeName: 'Theme 29',
      ActiveStatus: 'A',
    },
  ]);
  const [BillingOverallColorsList, setBillingOverallColorsList] = useState();
  const [BillUploadColor, setBillUploadColor] = useState(false);
  const [TableColorType, setTableColorType] = useState('Y');
  const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00');
  const [tableBGHex, setTableBGHex] = useState(
    TablebackgroundColor?.replace('#', '').trim()
  );
  const [TablefontColor, setTablefontColor] = useState('#000000');
  const [tableFontHex, setTableFontHex] = useState(
    TablefontColor?.replace('#', '').trim()
  );
  const [BillingUploadOverallColor, setBillingUploadOverallColor] =
    useState(false);
  const [BillingOverallColor, setBillingOverallColor] = useState('#000000');
  const [billingOverallHex, setBillingOverallHex] = useState(
    BillingOverallColor?.replace('#', '').trim()
  );
  const [selectOverallSelected, setSelectOverallSelected] = useState(true);
  const [dropdownBillingOverallColor, setdropdownBillingOverallColor] =
    useState(null);
  const [FirstOnClick, setFirstOnClick] = useState(false);

  useEffect(() => {
    GetTemplatedetails();
  }, []);

  const GetTemplatedetails = async () => {
    let Data = {
      CompId: CompId,
      AppId: AppId,
      BranchId: BranchId,
    };
    const templateresponse = await dispatch(getSalesTemplate(Data)).unwrap();
    let AllDetails = templateresponse?.data?.data;
    setTemplateDetails(AllDetails?.Templates);
    let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
      (item) => item?.SessionName === 'BookingBilling'
    );
    let selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
      (item) => item?.SessionName === 'BookingNavbar'
    );
    let AllBillingdetails = AllDetails?.Components?.find(
      (item) => item?.ComponentName === selectedBilling?.ComponentName
    );
    console.log(AllDetails, selectedNavbar, 'templateresponse');
    setBillingSettings(AllBillingdetails);
    const optionIds = selectedBilling?.FieldDetails?.map(
      (item) => item?.OptionId
    );
    setSelectedBillTableCheckValues(optionIds);

    let Allfontdata = AllDetails?.Fonts?.filter(
      (item) => item.SessionId === selectedBilling?.SessionId
    );
    setTableFontData(Allfontdata);
    let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(
      (item) => item?.SessionId === selectedBilling?.SessionId
    );

    setSelectedTableFont(selectedFont?.FontId);
    const hasHold = selectedNavbar?.FieldDetails?.some(
      (item) => item.OptionName === 'Hold'
    );
    const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
      (item) => item.OptionName === 'AddCustomer'
    );
    const hasDinein = selectedNavbar?.FieldDetails?.some(
      (item) => item.OptionName === 'DineIn'
    );
    setHoldButton(hasHold);
    setAddCustomerButton(hasAddcustomer);
    setDineInChecked(hasDinein);
    let allcolordata = AllDetails?.Colors?.filter(
      (item) =>
        item.SessionId === selectedBilling?.SessionId &&
        item.OptionName === 'OverallBackground'
    );
    setBillingOverallColorsList(allcolordata);
    let allBackcolordata = AllDetails?.Colors?.filter(
      (item) =>
        item.SessionId === selectedBilling?.SessionId &&
        item.OptionName === 'Background'
    );

    setTableBackgroundColorData(allBackcolordata);
    let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(
      (item) => item?.SessionName === 'BookingBilling'
    );
    console.log(selectedcolors, 'selectedOverallBackgroudcolor');
    selectedcolors?.forEach((item) => {
      if (item?.['BackgroundColor']) {
        setSelectedTableColor(item?.['ColorId']);
      } else if (item?.['OverallBackgroundColor']) {
        setdropdownBillingOverallColor(item?.['ColorId']);
      }
    });
    // await setdropdownBillingOverallColor(selectedOverallBackgroudcolor);
    // formRef.current?.setFieldsValue({ BillingOverallColor: value });

    // setTableBackgroundColorData
    console.log(Allfontdata, 'All table colors');
    // BookingBilling templateData?.['BookingBilling']?.[0]
  };

  const BillTableSelectlistonChange = (checkedValues) => {
    setSelectedBillTableCheckValues(checkedValues);
  };
  const handleChange = (itemId, checked) => {
    setBillingSettings((prev) =>
      prev.map((item) => (item.id === itemId ? { ...item, checked } : item))
    );
  };
  const selectFont3 = (value) => {
    setSelectedTableFont(value);
  };
  const TablehandleUploadFonts = () => {
    setTableFontModelopen(true);
  };
  const TablehandleCancel = () => {
    setTableFontModelopen(false);
    Tableform.resetFields();
  };
  const selectTableColor = async (value) => {
    await setSelectedTableColor(value);
    // formRef.current?.setFieldsValue({ TableColor: value });
  };
  const BillhandleUploadColor = () => {
    setBillUploadColor(true);
  };
  const handleColorChange4 = (color, event) => {
    if (TableColorType == 'Y') {
      setTablebackgroundColor(color['hex']);
      setTableBGHex(color?.hex?.replace('#', '').trim());
    }
    if (TableColorType == 'N') {
      setTablefontColor(color['hex']);
      setTableFontHex(color?.hex?.replace('#', '').trim());
    }
  };

  const handleBackgroundColorSubmit = async () => {
    if (TablebackgroundColor !== TablefontColor) {
      let response;
      try {
        let postData = {
          BackgroundColor: TablebackgroundColor,
          FontColor: TablefontColor,
          CreatedBy: UserId,
          SessionId: billingSettings?.SessionId,
          OptionId: backgroundOptionId,
        };
        response = await dispatch(postColorData(postData)).unwrap();
      } catch (err) {
        if (err['message'] == 'Request failed with status code 422') {
          response = {
            data: {
              statusCode: 0,
              response: 'Color Not Added',
              data: [],
            },
          };
        }
      }
      if (response?.data?.statusCode == 1) {
        if (response?.data?.response == 'Color Already Exists') {
          setMessageType('warning');
          setMessageData(response?.data?.response);
        } else {
          setMessageType('success');
          setMessageData(response?.data?.response);
          // BillsetUploadColor(false);
        }
        GetTemplatedetails();
        setBillUploadColor(false);
      } else {
        setMessageData(response?.data?.response);
        setMessageType('error');
      }
    } else {
      setMessageData('Please select different color for background and font');
      setMessageType('warning');
    }
  };
  const TableonCancel4 = () => {
    setBillUploadColor(false);
  };
  const handleTableHexChange = (e) => {
    if (TableColorType?.toLowerCase() === 'y') {
      setTableBGHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '009b00';
      }
      setTablebackgroundColor(`#${e.target.value}`);
    }
    if (TableColorType?.toLowerCase() === 'n') {
      setTableFontHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '000000';
      }
      setTablefontColor(`#${e.target.value}`);
    }
  };
  const handleBillingOverallHexCode = (e) => {
    setBillingOverallHex(e?.target?.value);
    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
      e.target.value = '000000';
    }
    setBillingOverallColor(`#${e.target.value}`);
  };
  const handleBillingOverallColorChange = (color, event) => {
    setBillingOverallColor(color['hex']);
    setBillingOverallHex(color?.hex?.replace('#', '').trim());
  };
  const handleBillingOverallColorSubmit = async () => {
    let response;

    try {
      let postData = {
        BackgroundColor: BillingOverallColor,
        FontColor: '#000000',
        CreatedBy: UserId,
        SessionId: billingSettings?.SessionId,
        OptionId: OverallbackgroundOptionId,
      };
      response = await dispatch(postColorData(postData)).unwrap();
    } catch (err) {
      if (err['message'] == 'Request failed with status code 422') {
        response = {
          data: {
            statusCode: 0,
            response: 'Color Not Added',
            data: [],
          },
        };
      }
    }
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response == 'Color Already Exists') {
        setMessageType('warning');
        setMessageData(response?.data?.response);
      } else {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setBillingUploadOverallColor(false);
      }
      GetTemplatedetails();
      BillingUploadOverallColor(false);
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
    }
  };
  const selectBillingOverallColor = async (value) => {
    await setdropdownBillingOverallColor(value);
    // formRef.current?.setFieldsValue({ BillingOverallColor: value });
  };
  const openColour4 = (value) => {
    setTableColorType(value);
  };
  const handleBillingUploadOverallColor = () => {
    setBillingUploadOverallColor(true);
  };

  const TablehandleSubmit = async () => {
    const values = await Tableform.validateFields();
    validateFontsTable(values);
  };
  const validateFontsTable = async (values) => {
    console.log(values, 'valuesvalues');
    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
    fetch(apiUrl)
      .then((response) => response.json())
      .then(async (data) => {
        const fontNames = data?.items?.map((item) => item.family);

        if (fontNames.includes(formatFontName(values['TableFont']))) {
          let response;
          try {
            let postData = {
              SessionFont: formatFontName(values['TableFont']),
              CreatedBy: UserId,
              SessionId: billingSettings?.SessionId,
            };
            response = await dispatch(postTableFontData(postData)).unwrap();
          } catch (err) {
            if (err['message'] == 'Request failed with status code 422') {
              response = {
                data: {
                  statusCode: 0,
                  response: 'Font Not Added',
                  data: [],
                },
              };
            }
          }
          if (response?.data?.statusCode == 1) {
            setTableFontModelopen(false);
            setMessageData(response?.data?.response);
            if (response?.data?.response == 'Font Already Exists') {
              setMessageType('warning');
            } else {
              setMessageType('success');
            }

            dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
            GetTemplatedetails();
            Tableform.resetFields();
          } else {
            setMessageData(response?.data?.response);
            setMessageType('error');
          }
        } else {
          setMessageType('warning');
          setMessageData('Please give the Correct google fonts Name!');
        }
      })
      .catch((error) => {
        console.error('Error fetching fonts:', error);
      });
  };
  function formatFontName(input) {
    return input
      ?.toLowerCase()
      .split(/\s+/)
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
      .join(' ');
  }
  const HandleSubmit = async () => {
    console.log(TemplateDetails, 'TemplateDetails.ColorDetail');
    const result = {
      AppId: AppId,
      CompId: CompId,
      UserId: UserId,
      BranchId: BranchId,
      ColorId: [
        ...(TemplateDetails?.[0]?.ColorDetail?.filter(
          (c) => c.SessionName !== 'BookingBilling'
        )?.map((c) => c.ColorId) || []),

        SelectedTableColor,
        dropdownBillingOverallColor,
      ],
      FontId: TemplateDetails?.[0]?.FontDetail?.map((f) =>
        f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId
      ),
      CreatedBy: UserId,
      TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({
        ComponentId: comp.ComponentId, // ✅ dynamic
        ComponentDetails:
          comp.SessionName === 'BookingBilling'
            ? SelectedBillTableCheckValues?.map((id) => ({ OptionId: id })) // ✅ NEW checked list
            : comp.FieldDetails.map((field) => ({ OptionId: field.OptionId })), // existing
      })),
    };
    console.log(result, 'final result to submit');
    var response = await dispatch(putSelectionComponentData(result)).unwrap();
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response === 'Application Template Already Exists') {
        setMessageType('warning');
        setMessageData('Application Template Already Exists');
        setFirstOnClick(false);
      } else {
        setMessageType('success');
        setMessageData('Template Details Added Successfully');
        setFirstOnClick(false);
      }
      await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
      setModalOpen(false);
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
      setFirstOnClick(false);
    }
  };
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  return (
    <>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: '10px',
          marginTop: '20px',
        }}
      >
        <Checkbox.Group
          style={{
            width: '100%',
          }}
          onChange={BillTableSelectlistonChange}
          value={SelectedBillTableCheckValues}
        >
          <Row>
            {billingSettings?.ComponentOptionsDetails?.map((value, key) => (
              <Checkbox
                style={{ padding: '12px' }}
                value={value?.OptionId}
                // onClick={() => Navholdoption(value.OptionName)}
                key={value?.OptionId}
                disabled={
                  value.OptionName === 'Hold' && HoldButton
                    ? true
                    : value.OptionName === 'AddCustomer' && AddCustomerButton
                      ? true
                      : value.OptionName === 'Item'
                        ? true
                        : value.OptionName === 'UnpaidBill' && !DineInChecked
                          ? true
                          : false
                }
              >
                {value.OptionName}
              </Checkbox>
            ))}
          </Row>
        </Checkbox.Group>
        {/* {billingSettings?.ComponentOptionsDetails?.map((item) => (
          <div key={item.id} style={{ flex: '0 0 48%' }}>
            <Checkbox
              checked={item.checked}
              onChange={(e) => handleChange(item.id, e.target.checked)}
            >
              {item.label}
            </Checkbox>
          </div>
        ))} */}
      </div>
      <div className="selctfontBackInputMain">
        <div className="selctfontBackInput">
          <p className="SelectionComponentSubHeading">BillTable Font</p>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              gap: '10px',
              alignItems: 'center',
            }}
          >
            <DropDowns
              options={TableFontData?.map((option) => ({
                value: option.FontId,
                label: option.SessionFont,
              }))}
              label="Font"
              onChangeFunction={selectFont3}
              className="settingsales-DropDown-Selection"
              isOnchanges={!!selectedTableFont}
              valueData={selectedTableFont}
            />
            <div
              className="settingaddNewSalesFiledBTN"
              onClick={TablehandleUploadFonts}
            >
              Add
              <IoMdAdd
              // className="plusOutlinedIcon"
              />
            </div>
          </div>
        </div>

        {hasBackground ? (
          <div>
            <div
              style={{
                display: 'flex',
                gap: '10px',
                flexWrap: 'nowrap',
                alignItems: 'center',
              }}
            >
              <div className="colorDropdown">
                <Form.Item
                  name="TableColor"
                  rules={[
                    {
                      required: true,
                      message: 'Please Select Color',
                    },
                  ]}
                >
                  <p className="SelectionComponentSubHeading">
                    BillTable Background Color
                  </p>
                  <DropDowns
                    options={TableBackgroundColorData?.map((option) => ({
                      value: option.ColorId,
                      label: (
                        <div
                          style={{
                            display: 'flex',
                            gap: '0.5rem',
                          }}
                        >
                          <div
                            style={{
                              width: '27px',
                              height: '27px',
                              borderRadius: '25.774192810058594px',
                              backgroundColor: option.BackgroundColor,
                            }}
                          >
                            <span
                              style={{
                                width: '27px',
                                height: '27px',
                                borderRadius: '50px',
                                marginLeft: '15px',
                                backgroundColor: option.FontColor,
                              }}
                            >
                              &nbsp;&nbsp;&nbsp;
                            </span>
                          </div>
                          <div>{option.ThemeName}</div>
                        </div>
                      ),
                    }))}
                    labelChange={true}
                    label="Color"
                    className="field-DropDown-Selection"
                    onChangeFunction={selectTableColor}
                    isOnchanges={SelectedTableColor ? true : false}
                    valueData={SelectedTableColor}
                  />
                </Form.Item>
              </div>
              <div
                className="addNewSalesFiledBTN"
                onClick={BillhandleUploadColor}
              >
                Add
                <IoMdAdd className="plusOutlinedIcon" />
              </div>
            </div>
          </div>
        ) : null}

        {hasOverallBackground ? (
          <div>
            <Modal
              open={BillingUploadOverallColor}
              title="BillTable Overall Background Color"
              closeIcon={
                <CloseOutlined
                  onClick={() => {
                    setBillingUploadOverallColor(false);
                  }}
                />
              }
              width={400}
              footer={null}
            >
              <div>
                <div
                  style={{
                    display: 'flex',
                    align: 'center',
                    width: '60%',
                    gap: '0.5rem',
                    border: '1px solid black',
                    borderRadius: '10px',
                    padding: '10px',
                  }}
                >
                  <p style={{ fontSize: '14px', fontWeight: 700 }}>
                    Selected Color:{' '}
                  </p>
                  <div
                    style={{
                      width: '35px',
                      height: '23px',
                      borderRadius: '5px',
                      backgroundColor: BillingOverallColor
                        ? BillingOverallColor
                        : null,
                    }}
                  ></div>
                </div>
                <div className="hex-input">
                  <InputField
                    prefix="#"
                    value={billingOverallHex}
                    inputMode="numeric"
                    maxLength={8}
                    onChange={handleBillingOverallHexCode}
                  />
                </div>
              </div>

              <SwatchesPicker onChange={handleBillingOverallColorChange} />

              <div>
                <button
                  className="colorBtn"
                  onClick={handleBillingOverallColorSubmit}
                >
                  SAVE
                </button>
              </div>
            </Modal>
            <div
              style={{
                display: 'flex',
                gap: '1rem',
                flexWrap: 'nowrap',
                alignItems: 'center',
              }}
            >
              <div className="colorDropdown">
                <Form.Item
                  name="BillingOverallColor"
                  rules={[
                    {
                      required: true,
                      message: 'Please Select Color',
                    },
                  ]}
                >
                  <p className="SelectionComponentSubHeading">
                    BillTable Overall-Background
                  </p>
                  <DropDowns
                    options={BillingOverallColorsList?.map((option) => ({
                      value: option.ColorId,
                      label: (
                        <div
                          style={{
                            display: 'flex',
                            gap: '0.5rem',
                          }}
                        >
                          <div
                            style={{
                              width: '27px',
                              height: '27px',
                              borderRadius: '25.774192810058594px',
                              backgroundColor: option.BackgroundColor,
                            }}
                          >
                            <span
                              style={{
                                width: '27px',
                                height: '27px',
                                borderRadius: '50px',
                                marginLeft: '15px',
                                backgroundColor: option.FontColor,
                              }}
                            >
                              &nbsp;&nbsp;&nbsp;
                            </span>
                          </div>
                          <div>{option.ThemeName}</div>
                        </div>
                      ),
                    }))}
                    labelChange={true}
                    label={
                      <p style={{ fontSize: '11px' }}>Overall Background</p>
                    }
                    className="field-DropDown-Selection"
                    onChangeFunction={selectBillingOverallColor}
                    isOnchanges={dropdownBillingOverallColor ? true : false}
                    valueData={dropdownBillingOverallColor}
                  />
                </Form.Item>
              </div>
              <div
                className="addNewSalesFiledBTN"
                onClick={handleBillingUploadOverallColor}
              >
                Add
                <IoMdAdd
                  className="plusOutlinedIcon"
                  onClick={handleBillingUploadOverallColor}
                />
              </div>
            </div>
          </div>
        ) : null}
      </div>
      <DefaultModal
        open={TableFontModelopen}
        title="Fonts"
        footer={true}
        children={
          <Form form={Tableform}>
            <div className="fontInputs">
              <div>
                <Form.Item
                  name="TableFont"
                  rules={[
                    {
                      required: true,
                      pattern: /^(?!\s*$).+/,
                      message: 'Please Enter Font',
                    },
                    {
                      validator: async (_, value) => {
                        await validateSafeInput(value); // To block HTML tags & SQL keywords
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <InputField
                    field="TableFont"
                    label="Font"
                    className="Input"
                    fieldState={true}
                    fieldApi={true}
                    autoComplete="off"
                  />
                </Form.Item>
              </div>
            </div>
            <p style={{ color: 'red' }}>* Google Fonts Only</p>
          </Form>
        }
        handleCancel={TablehandleCancel}
        handleSubmit={TablehandleSubmit}
        buttonText="SAVE"
      />

      <Modal
        open={BillUploadColor}
        title="Colors"
        closeIcon={<CloseOutlined onClick={TableonCancel4} />}
        width={400}
        footer={null}
      >
        <div>
          <div className="color-hex-select">
            <RadioGrpButton
              content={[
                { value: 'Y', label: 'Background' },
                { value: 'N', label: 'Font' },
              ]}
              defaultSelect={TableColorType}
              fieldState={true}
              onSelectFuntion={(e) => openColour4(e)}
            />
            <div className="hex-input">
              <InputField
                prefix="#"
                value={
                  TableColorType?.toLowerCase() === 'y'
                    ? tableBGHex
                    : TableColorType?.toLowerCase() === 'n'
                      ? tableFontHex
                      : ''
                }
                inputMode="numeric"
                maxLength={8}
                onChange={handleTableHexChange}
              />
            </div>
          </div>

          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              gap: '1rem',
              justifyContent: 'center',
              marginTop: '10px',
              borderRadius: '10px',
              border: '1px solid #000',
              padding: '10px',
              width: '110%',
            }}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '0.5rem',
              }}
            >
              <p style={{ fontSize: '10px', fontWeight: 700 }}>
                {' '}
                Selected Background Color :{' '}
              </p>
              <div
                style={{
                  width: '35px',
                  height: '23px',
                  borderRadius: '5px',
                  backgroundColor: TablebackgroundColor
                    ? TablebackgroundColor
                    : null,
                }}
              ></div>
              <>|</>
            </div>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '0.5rem',
              }}
            >
              <p style={{ fontSize: '10px', fontWeight: 700 }}>
                {' '}
                Selected Font Color :{' '}
              </p>
              <div
                style={{
                  width: '35px',
                  height: '23px',
                  borderRadius: '5px',
                  backgroundColor: TablefontColor ? TablefontColor : null,
                }}
              ></div>
            </div>
          </div>
        </div>

        <SwatchesPicker onChange={handleColorChange4} />

        <div>
          <button className="colorBtn" onClick={handleBackgroundColorSubmit}>
            SAVE
          </button>
        </div>
      </Modal>
      <div className=" submitButtonDiv">
        <Buttons
          buttonText="SUBMIT"
          color="901D77"
          icon={<ArrowRightOutlined />}
          htmlType={true}
          handleSubmit={HandleSubmit}
        />
      </div>
    </>
  );
};
export default TableHeadersetting;