Notes

"use client";

import React, { useState, useEffect } from "react";
import { apiUrl } from "@/app/constant/constant";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/navigation";
import { FcCheckmark } from "react-icons/fc";

const FilterProduct = () => {
const { t } = useTranslation();

const [supplierData, setSupplierData] = useState([]);
const [openItems, setOpenItems] = useState({});
const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);

const [selectedItems, setSelectedItems] = useState([]);
const [categoryWiseData, setCategoryWiseData] = useState([]);

const [filterProduct, setFilterProduct] = useState([]);
const [filterObj, setFilterObj] = useState({
filter_values: {
supplier: "",
item_no: "",
system_choice: "",
main_system: "",
limitation: "",
control: "",
price: "",
compatibility_secondary: "",
connectivity_primary: "",
connectivity_base: "",
voice_assistants: "",
connections: "",
order: "",
handling: "",
self_programming: "",
apps: "",
industrial_area: "",
building_type: "",
number_of_rooms: "",
availability_country: "",
manufacturer_country: "",
language: "",
warning_notice: "",
mail: "",
website: "",
link: "",
visualization: "",
},
category_ids: [],
lang: null,
});

const categoryIds = JSON.parse(localStorage.getItem("selectedCatIds"));
const toggleItem = (index) => {
setOpenItems((prevOpenItems) => ({
...prevOpenItems,
[index]: !prevOpenItems[index],
}));
};

var subCategoryIds = [];
const handleCheckboxChange = (categoryId, subcategoryId) => {

const collection = document.getElementsByClassName("category");
const price = document.getElementsByClassName("price");
const supplier = document.getElementsByClassName("supplier");
const connectivity = document.getElementsByClassName("connectivity");
const compatibility = document.getElementsByClassName("compatibility");
const handling = document.getElementsByClassName("handling");
const subCategoryIds = [];
const priceElements = [];
const supplierElements = [];
const connectivityElements = [];
const compatibilityElements = [];
const handlingElements = [];

for (let i = 0; i < collection.length; i++) {
const element = collection[i];
if (element.checked) {
subCategoryIds.push(parseInt(element.value));
//categoryIds.push(parseInt(element.value));
}
}


for (let i = 0; i < price.length; i++) {
const element2 = price[i];
if (element2.checked) {
priceElements.push(element2.value);
}
}

for (let i = 0; i < supplier.length; i++) {
const element3 = supplier[i];
if (element3.checked) {
supplierElements.push(element3.value);
}
}

for (let i = 0; i < connectivity.length; i++) {
const element4 = connectivity[i];
if (element4.checked) {
connectivityElements.push(element4.value);
}
}
for (let i = 0; i < compatibility.length; i++) {
const element5 = compatibility[i];
if (element5.checked) {
compatibilityElements.push(element5.value);
}
}
for (let i = 0; i < handling.length; i++) {
const element6 = collection[i];
if (element6.checked) {
handlingElements.push(element6.value);
}
}

let filter_data={
"supplier": supplierElements,
"item_no": "",
"system_choice":"",
"main_system": "",
"limitation" : "",
"control": "",
"price": priceElements,
"compatibility_secondary":compatibilityElements,
"connectivity_primary": connectivityElements,
"connectivity_base" : "",
"voice_assistants": "",
"connections": "",
"order":"",
"handling": handlingElements,
"self_programming" : "",
"apps": "",
"industrial_area": "",
"building_type":"",
"number_of_rooms": "",
"availability_country" : "",
"manufacturer_country": "",
"language": "",
"warning_notice":"",
"mail": "",
"website" : "",
"link": "",
"visualization" : ""
}

const mergeArray = subCategoryIds.concat(categoryIds);
//fetch(`${apiUrl}api/product/categorywise`, {
fetch(`${apiUrl}api/product/categorywise`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ category_ids: mergeArray,filter_values:filter_data }),
})
.then((response) => response.json())
.then((responseJson) => {
console.log("responseJson:-", responseJson);
if (responseJson.success == "true") {
setCategoryWiseData(responseJson.sub_categories.data);

//console.log(headerData.home_page_image)
}
})
.catch((error) => {
console.error(error);
});

};

const handleCompareClick = (item) => {
const selectedIndex = selectedItems.findIndex(
(selectedItem) => selectedItem.id === item.id
);

if (selectedIndex === -1) {
item.isChecked = true;

setSelectedItems([...selectedItems, { ...item, isChecked: true }]);
//console.log("item:-", selectedItems);
} else {
item.isChecked = false;
const updatedItems = [...selectedItems];
updatedItems.splice(selectedIndex, 1);
setSelectedItems(updatedItems);

//console.log("updated:-", updatedItems);
}
};
useEffect(() => {
localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

}, [selectedItems]);

const router = useRouter();
const gotocompare = () => {

router.push("/compare");
};

const getCategoriesInfo = async () => {
try {
const response = await fetch(`${apiUrl}api/category`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
},
// body: formBody
});
let data = [];
const responseJson = await response.json();

if (responseJson.success === "true") {
const res = responseJson.category.map((item) => {
if (categoryIds.includes(item.id)) {
data.push(item);
}
});
}
} catch (error) {
console.error(error);
}
};

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

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`${apiUrl}api/product/categorywise`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
category_ids: categoryIds,
lang: null,
}),
});

const responseData = await response.json();
console.log("responseData:-", responseData);
if (responseData.success === "true") {
//console.log(responseData);
//setProductAttr(responseData.product_attr_value);
setCategoryWiseData(responseData.sub_categories.data);
setSupplierData(responseData);
}
} catch (error) {
console.error("Error fetching data:", error);
}
};

fetchData();
}, []);

useEffect(() => {
//console.log(supplierData);
}, [supplierData]);

useEffect(() => {
//console.log(categoryWiseData);
}, [categoryWiseData]);


// const fetchFilterData = async () => {

// filterObj.category_ids = categoryIds;
// try {
// const response = await fetch(`${apiUrl}api/product/filterwise`, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// Accept: "application/json",
// },
// body: JSON.stringify(filterObj),
// });
// const responseData = await response.json();
// if (responseData.success === "true") {
// setFilterProduct(responseData.filter_product);

// }
// console.log(responseData);
// } catch (error) {
// console.error("Error fetching data:", error);
// }
// };


// const handleFilterFunc = (type, value) => {
// setFilterObj(prevFilterObj => ({
// ...prevFilterObj,
// filter_values: {
// ...prevFilterObj.filter_values,
// [type]: value
// }
// }));
// console.log(type, value, filterObj); // Note: filterObj will still contain the previous state here due to closure
// };
const handleFilterFunc = (event, type, value) => {
const isChecked = checkedCheckboxes.find(
(checkbox) =>
checkbox.type === type &&
checkbox.value === value
);
//console.log("isChecked:-", isChecked);

setFilterObj((prevFilterObj) => {
const updatedFilterValues = { ...prevFilterObj.filter_values };
//console.log("updatedFilterValues:-", updatedFilterValues);
if (type === "price") {
updatedFilterValues.price = event.target.checked ? value : "";
} else if (type === "supplier") {
updatedFilterValues.supplier = event.target.checked ? value : "";

} else if (type === "compatibility_secondary") {
updatedFilterValues.compatibility_secondary = event.target.checked
? value
: "";
} else if (type === "connectivity_primary") {
updatedFilterValues.connectivity_primary = event.target.checked
? value
: "";
} else if (type === "handling") {
updatedFilterValues.handling = event.target.checked ? value : "";
} else if (type === "self_programming") {
updatedFilterValues.self_programming = event.target.checked
? value
: "";
} else if (type === "main_system") {
updatedFilterValues.main_system = event.target.checked ? value : "";
}
//console.log("updatedFilterValues:-", updatedFilterValues);
//fetchFilterData(updatedFilterValues);

fetch(`${apiUrl}api/product/filterwise`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ filter_values: updatedFilterValues, category_ids: categoryIds }),
})
.then((response) => response.json())
.then((responseJson) => {
console.log("responseJson234:-", responseJson);
if (responseJson.success == "true") {
setFilterProduct(responseData.filter_product);

}
})
.catch((error) => {
console.error(error);
});

if (isChecked) {

setCheckedCheckboxes((prevCheckboxes) =>

prevCheckboxes.filter(
(checkbox) =>
!(
checkbox.type === type &&
checkbox.value === value
)
)
);

} else {
setCheckedCheckboxes((prevCheckboxes) => [
...prevCheckboxes,
{ type, value },
]);
}

return {
...prevFilterObj,
filter_values: updatedFilterValues,
};
});
};

return (
<>
<section
className="banner"
style={{
backgroundImage: `url(/assets/img/banner3.jpg)`,
}}
>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="banner-caption">
<h3>FilterProduct</h3>

<ul className="breadcrumb">
<li>
<a href="#">Start</a>
</li>
<li>FilterProduct</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<section className="service py-100">
<div className="container-fluid">
<div className="row">
<div className="col-md-3 col-lg-2">
<div className="sidebar-header">
<h3>Filter</h3>
<a href="#">Collapse all</a>
</div>

<div className="search">
<form action="">
<input type="search" name="" id="" placeholder="Keyword" />
<button>
<i className="jki jki-search-light"></i>
</button>
</form>
</div>

<div className="sidebar">
<ul>
{supplierData &&
supplierData?.sub_categories &&
supplierData?.sub_categories?.data &&
supplierData?.sub_categories?.data.map(
(category, index) => (
<li key={index}>
<h3>
{category.cat_name}
<i
className={
openItems[index]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(index)}
></i>
</h3>
{openItems[index] &&
category.subcategories.length > 0 && (
<ul>
{category.subcategories.map(
(subcategory, ind) => (
<li key={ind}>
<div className="form-group">
<input
type="checkbox"
id={subcategory.id}
name="category"
className="category"
value={subcategory.id}
onChange={() =>
handleCheckboxChange(
"category",
subcategory.id
)
}
/>
<label
htmlFor={`bpo_${subcategory.id}`}
>
{subcategory.cat_name}
</label>
</div>
</li>
)
)}
</ul>
)}
</li>
)
)}
</ul>
</div>

<div className="sidebar">
<h3>
Price
<i
className={
openItems[100]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(100)}
></i>
</h3>
{openItems[100] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.price &&
supplierData?.product_attr_value?.price.map(
(priceObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
id={priceObj.price}
className="price"
value={priceObj.price}
onChange={(event) =>
handleCheckboxChange( "price",priceObj.price)
}
/>
<label htmlFor={`bpo_${priceObj.price}`}>
{priceObj.price}
</label>
</div>
</div>
)
)}
</div>

<div className="sidebar">
<h3>
Supplier
<i
className={
openItems[101]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(101)}
></i>
</h3>
{openItems[101] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.supplier.map(
(supplierObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
className="supplier"
id={supplierObj.supplier}
onChange={(event) =>
handleFilterFunc(
event,
"supplier",
supplierObj.supplier
)
}
/>
<label htmlFor={`bpo_${supplierObj.supplier}`}>
{supplierObj.supplier}
</label>
</div>
</div>
)
)}
</div>

<div className="sidebar">
<h3>
Compatibility
<i
className={
openItems[102]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(102)}
></i>
</h3>
{openItems[102] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.compatibility_secondary.map(
(compartibiltyObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
className="compatibility"
id={compartibiltyObj.compatibility_secondary}
onChange={(event) =>
handleFilterFunc(
event,
"compatibility_secondary",
compartibiltyObj.compatibility_secondary
)
}
/>
<label
htmlFor={`bpo_${compartibiltyObj.compatibility_secondary}`}
>
{compartibiltyObj.compatibility_secondary}
</label>
</div>
</div>
)
)}
</div>

<div className="sidebar">
<h3>
Connectivity
<i
className={
openItems[103]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(103)}
></i>
</h3>
{openItems[103] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.connectivity_primary.map(
(connectivityObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
className="connectivity"
id={connectivityObj.connectivity_primary}
onChange={(event) =>
handleFilterFunc(
event,
"connectivity_primary",
connectivityObj.connectivity_primary
)
}
/>
<label
htmlFor={`bpo_${connectivityObj.connectivity_primary}`}
>
{connectivityObj.connectivity_primary}
</label>
</div>
</div>
)
)}
</div>

<div className="sidebar">
<h3>
Handling
<i
className={
openItems[104]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(104)}
></i>
</h3>
{openItems[104] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.handling.map(
(handlingObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
className="handling"
id={handlingObj.handling}
onChange={(event) =>
handleFilterFunc(
event,
"handling",
handlingObj.handling
)
}
/>
<label htmlFor={`bpo_${handlingObj.handling}`}>
{handlingObj.handling}
</label>
</div>
</div>
)
)}
</div>

<div className="sidebar">
<h3>
Self-Programming
<i
className={
openItems[105]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(105)}
></i>
</h3>
{openItems[105] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.self_programming.map(
(selfprogrammingObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
className="programming"
id={selfprogrammingObj.self_programming}
onChange={(event) =>
handleFilterFunc(
event,
"self_programming",
selfprogrammingObj.self_programming
)
}
/>
<label
htmlFor={`bpo_${selfprogrammingObj.self_programming}`}
>
{selfprogrammingObj.self_programming}
</label>
</div>
</div>
)
)}
</div>

<div className="sidebar">
<h3>
Main-System
<i
className={
openItems[106]
? "jki jki-chevron-up-light"
: "jki jki-chevron-down-light"
}
style={{ cursor: "pointer" }}
onClick={() => toggleItem(106)}
></i>
</h3>
{openItems[106] &&
supplierData &&
supplierData?.product_attr_value &&
supplierData?.product_attr_value?.main_system.map(
(mainsystemObj, index) => (
<div className="sidebar-inpup" key={index}>
<div className="form-group">
<input
type="checkbox"
className="system"
id={mainsystemObj.main_system}
onChange={(event) =>
handleFilterFunc(
event,
"main_system",
mainsystemObj.main_system
)
}
/>
<label htmlFor={`bpo_${mainsystemObj.main_system}`}>
{mainsystemObj.main_system}
</label>
</div>
</div>
)
)}
</div>
</div>

<div className="col-md-9 col-lg-10">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="about-2-title mb-5 text-center wow fadeInUp">
<span className="section-id">Vergleich</span>
<h2 className="s-52 mb-30">
We Have <span>Many Service</span> Currentrly
</h2>
<p className="mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quaerat alias possimus vitae. Eveniet dicta voluptatem
voluptatibus soluta vero enim iusto maxime cum corrupti
odio nemo sed eaque velit, vitae similique!
</p>
</div>
</div>
</div>

<div className="row">
{categoryWiseData &&
categoryWiseData.map((filter_product, index) => (
<>
{filter_product.product.map((item, ind) => (
<div className="col-xl-3 col-lg-4 col-md-6" key={ind}>
<div
className="vergleich wow fadeInUp"
onClick={() => handleCompareClick(item)}
>
<div
className={`fbox-6 ${
item.isChecked === true ? "active" : ""
}`}
>
<div className="fbox-filter-6">
<div className="img-style">
<img
src={`${apiUrl}storage/product/${item?.pro_image}`}
alt=""
className="img-fluid"
/>
</div>
<div className="check-icon">
<FcCheckmark />
</div>
</div>
<div className="fbox-txt text-center">
<h6>
{item?.pro_name} {item.isChecked}
</h6>
{item?.pro_details ? (
<p>{item?.pro_details}</p>
) : null}
</div>
</div>
</div>
</div>
))}
</>
))}
</div>
<div className="row">
{filterProduct &&
filterProduct.length > 0 &&
filterProduct.map((item, ind) => (
<div className="col-xl-3 col-lg-4 col-md-6" key={ind}>
<div
className="vergleich wow fadeInUp"
onClick={() => handleCompareClick(item)}
>
<div
className={`fbox-6 ${
item.isChecked === true ? "active" : ""
}`}
>
<div className="fbox-filter-6">
<div className="img-style">
<img
src={`${apiUrl}storage/product/${item?.pro_image}`}
alt=""
className="img-fluid"
/>
</div>
<div className="check-icon">
<FcCheckmark />
</div>
</div>
<div className="fbox-txt text-center">
<h6>
{item?.pro_name} {item.isChecked}
</h6>
{item?.pro_details ? (
<p>{item?.pro_details}</p>
) : null}
</div>
</div>
</div>
</div>
))}
</div>

<button className="btn btn-success" onClick={gotocompare}>
{t("Compare")}
</button>
</div>
</div>
</div>
</section>
</>
);
};

export default FilterProduct;