Android_Retail/src/Pages/Product/Utils/DefaultSettingPopover.jsx

import { memo, useState, useEffect } from "react";
import { DropDowns } from "../../../Components/Forms/DropDown";
import { Checkbox, Popover } from "antd";
import { Settings, X } from "lucide-react";
import { PlusCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { getActiveProdSubCatData } from "../../../Features/ProductPage/ProductPage";
import { useDispatch } from "react-redux";
import { getSession } from "../../../Services/Others";

const DefaultSettingPopover = memo(({ field, options, onSubmit, currentDefault, popOverHeading, checkBoxHeading = 'Apply to all existing rows', showField, Component = null, triggerModal = () => { }, needAllSubCategories = false }) => {
    const dispatch = useDispatch();
    const [selectedValue, setSelectedValue] = useState(currentDefault);
    const [applyToAll, setApplyToAll] = useState(false);
    const [open, setOpen] = useState(false);
    const [fetchSubCategoriesData, setFetchSubCategoriesData] = useState(false);
    console.log(fetchSubCategoriesData, "fetchSubCategoriesData")
    useEffect(() => {
        if (open) {
            setSelectedValue(currentDefault);
            setApplyToAll(false);
        }
    }, [open, currentDefault]);

    useEffect(() => {

        const fetchAllSubCategories = async () => {

            await (dispatch(getActiveProdSubCatData({ AppId: getSession('AppId') })))?.unwrap();
            setFetchSubCategoriesData(false);
        }

        if (fetchSubCategoriesData) {
            fetchAllSubCategories();
        }
    }, [fetchSubCategoriesData]);

    const handleSubmit = () => {
        onSubmit(field, selectedValue, applyToAll);
        setOpen(false);
        setApplyToAll(false);
        setSelectedValue("");
    };

    const getFieldTitle = (field) => {
        switch (field) {
            case "uom": return "UOM";
            case "category": return "Category";
            case "subCategory": return "Sub-Category";
            case "tax": return "Tax";
            default: return field;
        }
    };

    const content = (
        <div className="popover-container">
            <div className="popover-header">
                <span className="popover-title">{popOverHeading}</span>
                <X size={14} className="close-icon" onClick={() => setOpen(false)} />
            </div>

            {showField && <div
                style={{
                    fontSize: '14px', fontWeight: '500', color: '#333', marginBottom: '10px', padding: '5px 10px', backgroundColor: '#f0f0f0', borderRadius: '4px', textAlign: 'center'
                }}
            >{showField}</div>}

            <div className="popover-section" style={{ display: 'flex', alignItems: 'flex-start', gap: '5px' }}>
                <DropDowns
                    label={`Select default ${getFieldTitle(field).toLowerCase()}`}
                    valueData={selectedValue}
                    onChangeFunction={setSelectedValue}
                    options={options}
                />
                {Component && (
                    <Tooltip title={`Add ${getFieldTitle(field)}`} placement="top">
                        <PlusCircleOutlined
                            className="product-add-iconMargin"
                            onClick={() => {
                                triggerModal(true);
                                if (needAllSubCategories) {
                                    setFetchSubCategoriesData(true);
                                }
                            }}
                        />
                    </Tooltip>
                )}
            </div>
            {Component}
            <div className="popover-checkbox">
                <Checkbox
                    checked={applyToAll}
                    onChange={(e) => setApplyToAll(e.target.checked)}
                >
                    {checkBoxHeading}
                </Checkbox>
            </div>

            <div className="popover-actions">
                <button
                    className="btn btn--primary"
                    onClick={handleSubmit}
                    disabled={!selectedValue}
                >
                    Submit
                </button>
            </div>
        </div>
    );

    return (
        <>
            <Popover
                content={content}
                trigger="click"
                placement="bottomLeft"
                open={open}
                onOpenChange={setOpen}
                overlayClassName="default-setting-popover"
            >
                <Settings size={14} className="setting-icon" />
            </Popover>
        </>
    );
});

export default DefaultSettingPopover;