Notes

"use client"

import { useEffect, useState } from "react"
import React from 'react'
import QuotationModal from "@/app/components/modals/page";
import { useTranslation } from "react-i18next";
import { apiUrl } from "@/app/constant/constant";
import Link from "next/link";

const TableData = () => {

const { t } = useTranslation();
const [categoryWiseData, setCategoryWiseData] = useState([]);

const [modalIsOpen, setModalIsOpen] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const [sendData, setSendData] = useState([]);
const [product, setProduct] = useState([]);
const [subCategoryProduct, setsubCategoryProduct] = useState([]);
console.log("subCategoryProduct:-", subCategoryProduct);
useEffect(() => {
const fetchData = async () => {
try {
const sessionVariable =
typeof window !== "undefined"
? JSON.parse(localStorage.getItem("selectedCatIds"))
: null;
const purchasedId = localStorage.getItem("purchasedCatId");

const newSessionVar = purchasedId
? sessionVariable.concat(parseInt(purchasedId))
: sessionVariable;

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

const responseData = await response.json();

if (responseData.success === "true") {
const allProductArrays = extractProductArrays(responseData.sub_categories.data);
console.log("allProductArrays:-", allProductArrays);

setsubCategoryProduct(allProductArrays);
setCategoryWiseData(responseData);
}
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);


const extractProductArrays = (categories) => {
let allProductArrays = [];

categories.forEach(category => {
if (category.product && category.product.length > 0) {
allProductArrays.push(category.product);
}

if (category.subcategories && category.subcategories.length > 0) {
const subcategoryProductArrays = extractProductArrays(category.subcategories);
allProductArrays = [...allProductArrays, ...subcategoryProductArrays];
}
});

return allProductArrays;
};

const removeElement = (id) => {
const updatedData = product.filter((item) => item.id !== id);
setProduct(updatedData);

localStorage.setItem("selectData", JSON.stringify(updatedData));
};


const sendRequestQuotation = async () => {
const userConfirmed = window.confirm(
"Are you sure you want to send the quotation request?"
);
if (userConfirmed) {
setModalIsOpen(true);
}
};

const closeModal = () => {
setModalIsOpen(false);
};

const handleOnChange = (e, id) => {
setIsChecked((prevStates) => ({
...prevStates,
[id]: e.target.checked,
}));
setSendData((prevData) => {
if (e.target.checked) {
return [...prevData, id];
} else {
return prevData.filter((itemId) => itemId !== id);
}
});
};


return (
<>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="comparemodal-body">
<div className="table-wrapper table-responsive ratio_asos">
<table className="table table-compare">
<thead>
<tr>
<th>{t("Request Quote")}</th>
<th>{t("IMAGE")}</th>
<th>{t("NAME")}</th>
<th>{t("PRICE")}</th>
<th>{t("HANDLING")}</th>
<th>{t("COMPATIBILITY")}</th>
<th>{t("CONNECTIVITY")}</th>
<th>{t("Suppliers")}</th>
<th>{t("SELF-PROGRAMMING")}</th>
<th>{t("DIRECT BUY FROM MANUFACTURER")}</th>
</tr>
</thead>
<tbody>
{/* {categoryWiseData?.sub_categories?.data.map(
(cateItem) =>
cateItem.product.map((product,index) => ( */}
{subCategoryProduct.map((productArray, arrayIndex) => (
productArray.map((product, index) => (
<tr
key={index}
className="table-product-details"
>
<td>
<a>
<input
type="checkbox"
id={index}
name={index}
value="requestQuote"
checked={isChecked[product.id] || false}
onChange={(e) =>
handleOnChange(e, product.id)
}
/>
</a>
</td>
<td>
<div className="product-box">
<div className="product-image">
<button
className="btn-remove"
onClick={() =>
removeElement(product.id)
}
>
<i className="jki jki-times-solid"></i>
</button>

<div className="img-style">
<img
src={`${apiUrl}storage/product/${product.pro_image}`}
className="img-fluid bg-img img-80"
alt=""
/>
</div>
</div>
</div>
</td>
<td>
<div className="product-title">
<a href="#">
<h6 className="truncate">
{product.pro_name}
</h6>
</a>
</div>
<p className="content-color truncate-2"></p>
</td>
<td>
<span className="font-light">
{product.price}
</span>
</td>
<td>
<p>{product.auth_guard}</p>
</td>
<td>{product.compatibility_secondary}</td>
<td>{product.connectivity_primary}</td>
<td>{product.supplier}</td>
<td>{product.self_programming}</td>
<td>
<Link
href={product.link ? product.link : "NA"}
target="_blank"
className={product.link ? "" : "disabled"}
>
<button className="btn btn-success text-nowrap">
{t("Direct Buy")}
</button>
</Link>
</td>
</tr>

))
))}


<tr>
<td
style={{ borderLeft: "none !important" }}
colSpan="9"
className="border-0"
>
<div className="d-flex mt-2">
<button
className="btn btn-success btn-full bg-success"
type="submit"
disabled={Object.values(isChecked).every(
(state) => !state
)}
onClick={sendRequestQuotation}
>
{t("RequestQuotation")}
</button>
</div>
</td>
</tr>

</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<QuotationModal
showModal={modalIsOpen}
closeModal={closeModal}
sendData={sendData}
modalContent="Modal Content Goes Here"
/>

</>
)
}

export default TableData