import { memo, useState, useEffect } from "react";
import { DropDowns } from "../../../Components/Forms/DropDown";
import { Checkbox, Popover } from "antd";
import { Settings, X } from "lucide-react";

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

    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">
                <DropDowns
                    label={`Select default ${getFieldTitle(field).toLowerCase()}`}
                    valueData={selectedValue}
                    onChangeFunction={setSelectedValue}
                    options={options}
                />
            </div>

            <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;