import React, { useEffect, useState } from "react";
import { getSession } from "../../../../Services/Others";
import { useDispatch } from "react-redux";
import { getmultipleSearch, PostProductSearch } from "../../../../Features/BookingScreen/BookingData/BookingData";
import Buttons from "../../../../Components/Forms/Buttons";


const MultipleSearch = ({ close }) => {
    const CompId = getSession("CompId");
    const BranchId = getSession("BranchId");
    const AppId = getSession("AppId");
    const dispatch = useDispatch();


    const options = [
        { label: "Product Name", value: "ProdName" },
        { label: "Product Variant Name", value: "ProdVariantName" },
        // { label: "Product ID", value: "ProdId" },
        { label: "One Piece QR", value: "OnePcQR" },
        { label: "QR Code", value: "QrCode" },
        { label: "Product Name Code", value: "ProdNameCode" },
        { label: "Category Name", value: "CategoryName" },
        { label: "Sub Category Name", value: "SubCategoryName" },
        { label: "Brand Name", value: "BrandName" },
    ];


    const [selectedValues, setSelectedValues] = useState([]);
    console.log(selectedValues, 'selectedValuesselectedValues');

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


    const postMultipleSearch = async () => {
        if (selectedValues.length === 0) {
            alert("Please select at least one option!");
            return;
        }
        const data = {
            CompId: CompId,
            BranchId: BranchId,
            AppId: AppId,
            SearchTerms: selectedValues,
        };
        try {
            const response = await dispatch(PostProductSearch(data)).unwrap();
            console.log("Search Response:", response);
            if (response?.data?.statusCode == 1) {
                setSelectedValues('')
                close(false);
            }
        } catch (error) {
            console.error("Search Error:", error);
        }
    };


    const GetmultipleSearchData = async () => {
        const data = {
            AppId,
            CompId,
            BranchId,
        };

        try {
            const response = await dispatch(getmultipleSearch(data)).unwrap();

            if (response?.data?.statusCode === 1) {
                const selected = response?.data?.data?.[0]?.SearchTermDtl?.map(
                    (item) => item?.SearchTerm
                ) || [];

                setSelectedValues(selected);
            }
        } catch (error) {
            console.error("Get Search Terms Error:", error);
        }
    };

    return (
        <>
            <div>
                {options.map((item) => (
                    <label
                        key={item.value}
                        style={{
                            display: "block",
                            marginBottom: "6px",
                            cursor: "pointer",
                            fontSize: "14px",
                            color: "#333",
                        }}
                    >
                        <input
                            type="checkbox"
                            checked={selectedValues.includes(item.value)}
                            onChange={() => {
                                setSelectedValues((prev) =>
                                    prev.includes(item.value)
                                        ? prev.filter((i) => i !== item.value)
                                        : [...prev, item.value]
                                );
                            }}
                            style={{ marginRight: "8px" }}
                        />
                        {item.label}
                    </label>
                ))}

            </div>
            <div>
                <Buttons
                    buttonText={'Submit'}
                    handleSubmit={postMultipleSearch}
                    color="901D77"
                // icon={<PlusOutlined />}
                />
            </div>

        </>
    );
};

export default MultipleSearch;