import React, { useEffect, useState } from "react";
import { getSession } from "../../../../Services/Others";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import {
  getmultipleSearch,
  GlobalGetmultipleSearchDatas,
  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 GetmultipleSearchDatas = useSelector(GlobalGetmultipleSearchDatas, shallowEqual)

  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();
    setSelectedValues(GetmultipleSearchDatas)
  }, []);

  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) {
         GetmultipleSearchData();
        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))

    } catch (error) {
      console.error("Get Search Terms Error:", error);
    }
  };
  return (
    <>
      <div
        style={{ fontFamily: "Poppins", fontWeight: "500", marginTop: "10px" }}
      >
        {options.map((item) => (
          <label
            key={item.value}
            style={{
              display: "block",
              marginBottom: "6px",
              cursor: "pointer",
              fontSize: "14px",
              color: "#333",
              margin: "6px 0",
            }}
          >
            <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 style={{ display: "flex", width: "100%", marginTop: "2rem" }}>
        <Buttons
          buttonText={"Submit"}
          handleSubmit={postMultipleSearch}
          color="901D77"
        />
      </div>
    </>
  );
};

export default MultipleSearch;