Notes

"use client";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { apiUrl } from "@/app/constant/constant";
import FilterLeft from "./FilterLeft";
import { FcCheckmark } from "react-icons/fc";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";
import { Pagination } from "@/app/components/Pagination/Pagination";
import QuotationModal from "@/app/components/modals/page";
import TableData from "./TableData";
import RestrictedRoute from "@/app/components/AuthProvider/RestritcedRoute";
import { fetchWithAuth } from "@/app/utils/api";

const FilterProduct = ({ data }) => {
console.log(data);
const [currentPage, setCurrentPage] = useState(1);
const { t } = useTranslation();
const router = useRouter();
const [categoryWiseData, setCategoryWiseData] = useState([]);
const [filterWiseData, setFilterWiseData] = useState([]);
const [search, setSearch] = useState("");
const [activeItems, setActiveItems] = useState([]);
const [dataItems, setDataItems] = useState([]);
const [product, setProduct] = useState([]);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [categoryIds, setCategoryIds] = useState([]);
const pageSize = 10;

const onPageChange = (page) => {
setCurrentPage(page);
};

useEffect(() => {
const savedDataString = localStorage.getItem("selectData");
const savedData = JSON.parse(savedDataString) || [];
setProduct(savedData);
}, []);

useEffect(() => {
const fetchData = async () => {
try {
const sessionVariable =
typeof window !== "undefined"
? JSON.parse(localStorage.getItem("selectedCatIds"))
: null;
console.log(sessionVariable);
const purchasedId = localStorage.getItem("purchasedCatId");
console.log(purchasedId, "purchasedId");

const newSessionVar = purchasedId
? sessionVariable.concat(parseInt(purchasedId))
: sessionVariable;
console.log(newSessionVar, "newSessionVar");

if (sessionVariable) {
let options = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
category_ids: newSessionVar,
lang: null,
}),
};
const response = await fetchWithAuth(
`${apiUrl}api/product/categorywise`,
options
);
const responseJson = await response.json();
if (responseJson.success === "true") {
setCategoryWiseData(responseJson);
}
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);

const onChangeData = (data) => {
setFilterWiseData(data);
};

const filterSearch = search
? filterWiseData.filter((item) => {
const fname =
item.pro_name &&
item.pro_name.toLowerCase().includes(search.toLowerCase());
const supplier =
item.supplier &&
item.supplier.toLowerCase().includes(search.toLowerCase());
const main_system =
item.main_system &&
item.main_system.toLowerCase().includes(search.toLowerCase());
const price =
item.price && item.price.toLowerCase().includes(search.toLowerCase());
const compatibility_secondary =
item.compatibility_secondary &&
item.compatibility_secondary
.toLowerCase()
.includes(search.toLowerCase());
const connectivity_primary =
item.connectivity_primary &&
item.connectivity_primary
.toLowerCase()
.includes(search.toLowerCase());
const handling =
item.handling &&
item.handling.toLowerCase().includes(search.toLowerCase());
const self_programming =
item.self_programming &&
item.self_programming.toLowerCase().includes(search.toLowerCase());
return (
fname ||
supplier ||
main_system ||
price ||
compatibility_secondary ||
connectivity_primary ||
handling ||
self_programming
);
})
: filterWiseData;

return (
<RestrictedRoute>
<>
<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>{t("FilterProduct")}</h3>

<ul className="breadcrumb">
<li>
<a href="/">{t("Start")}</a>
</li>
<li>{t("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
onSubmit={(e) => {
e.preventDefault();
}}
>
<input
type="search"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Keyword"
/>
</form>
</div>

<FilterLeft
data={categoryWiseData}
categoryIds={categoryIds}
onChangeData={onChangeData}
/>
</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>

<TableData filterSearch={filterWiseData} />
</div>
</div>
</div>
</section>
</>
</RestrictedRoute>
);
};

export default FilterProduct;