Notes

"use client";

import React, { useState, useEffect } from "react";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { FcCheckmark } from "react-icons/fc";
import { apiUrl } from "@/app/constant/constant";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/navigation";
import axios from "axios";

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

const [selectedCategories, setSelectedCategories] = useState([]);
const [selectedCount, setSelectedCount] = useState(0);

const [userSubscription, setUserSubscription] = useState([]);
const sub = userSubscription[0];
console.log("SUb:",sub)

// const userRole = JSON.parse(sessionStorage.getItem("role"));
// console.log("User Role", userRole);

useEffect(() => {
const fetchData = async () => {
const session = JSON.parse(sessionStorage.getItem("token"));
let token = "";
if (session != null) {
token = session.access_token;
}

try {
const response = await axios.get(
`${apiUrl}api/user/subscription/details`,
{
headers: {
Authorization: "Bearer " + token,
},
}
);
setUserSubscription(response?.data?.data); // Assuming the API response contains user data
} catch (error) {
console.error("Error fetching user data:", error);
}
};

fetchData();
}, []);

const router = useRouter(); //router Initialization

const handleCategoryClick = (selectedCategoryId) => {
const updatedCategories = selectedCategories.map((item) =>
item.id === selectedCategoryId
? { ...item, isSelected: !item.isSelected }
: item
);
//event handler for category click, it updates the state based selected category

const selectedCat = updatedCategories.filter((item) => item.isSelected);
const selectedCatIds = selectedCat.map((item) => item.id);
localStorage.setItem("selectedCatIds", JSON.stringify(selectedCatIds));
setSelectedCount(selectedCat.length);

if (selectedCat.length === 2) {
toast.warning("You can select one more category");
} else if (selectedCat.length > 3) {
toast.error("You need a premium subscription");
return;
}

setSelectedCategories(updatedCategories);
};

const handleSubscriptionClick = () => {
//event handler for subscription click,
const token = sessionStorage.getItem("token");
if (token !== null) {
router.push("/subscription");
} else {
router.push("/login");
}
};

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
});

const responseJson = await response.json();
if (responseJson.success === "true") {
const res = responseJson.category.map((item) => ({
...item,
isSelected: false,
}));
setSelectedCategories(res);
}
} catch (error) {
//console.error(error);
}
};

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

useEffect(() => {

}, [selectedCount]);

return (
<>
<section
id="features-6"
className="pt-100 pb-50 features-section division"
>
<div className="container">
<div className="fbox-wrapper text-center">
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-4">
{selectedCategories.map((category) => (
<div className="col" key={category.id}>
<div
className={`fbox-6 fb-1 wow fadeInUp ${
category.isSelected ? "active" : ""
}`}
onClick={() => handleCategoryClick(category.id)}
>
<div className="img-style">
<img
src={`${apiUrl}storage/category/${category?.cat_image}`}
alt=""
className="img-fluid"
/>
</div>
<div className="check-icon">
<FcCheckmark />
</div>
<div className="fbox-txt">
<h6 className="s-20">{category?.cat_name}</h6>
</div>
</div>
</div>
))}
</div>
<div className="d-flex align-items-center justify-content-center mt-4">
{selectedCount > 0 ? (
<Link
href="/product/ProductFilter"
state={{ selectedCategories }}
className="btn btn-success me-4"
>
{" "}
{t("View Product")}
</Link>
) : (
<Link
href="/product"
state={{ selectedCategories }}
className="btn btn-success"
>
{t("View All Products")}
</Link>
)}

{sub?.payment_status === "Completed" ||
(sub?.user_type === "2" || sub?.user_type === "3") ?
<button className="btn btn-danger ms-4">Not Data</button> : <button
className="btn btn-success ms-4"
onClick={handleSubscriptionClick}
>
{t("Subscription")}
</button>}
</div>
</div>
</div>
</section>
</>
);
};

export default Section2;