Notes

"use client";
import React, { useState, useEffect } from "react";
import { apiUrl } from "@/app/constant/constant";
import axios from "axios";
import SelectSearch from "react-select-search";
import "react-select-search/style.css";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useTranslation } from "react-i18next";

const AdvanceSearch = () => {
const [vale, setValue] = useState("");

const [subCategories, setSubCategories] = useState([]);
const [suppliers, setSuppliers] = useState([]);
const [supplierOptions, setSupplierOptions] = useState([]);
const [filteredCategories, setFilteredCategories] = useState([]);
const [userToken,setUserToken]=useState('');
const [filterSelectedCatIds, setFilterSelectedCatIds] = useState([]);


const { t } = useTranslation();

const router = useRouter();

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 categories = responseJson.category;

setFilteredCategories(categories);

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

const fetchSuppliers = async () => {
try {
let arr = [];
const response = await axios.get(`${apiUrl}api/home/suppliers`);
response.data.supplier.forEach((element) => {
arr.push({ value: element.supplier, name: "supplier" });
});
setSupplierOptions(arr);
setSuppliers(response.data.supplier);
} catch (error) {
console.error(error.message);
}
};


const handleBackend = () => {
router.push(`http://45.79.185.26/trifusa/public/admin/apidashboard/${userToken.access_token}`);

}

const handleSelectCategory = (selectedCategory) => {

console.log("Selected category:", selectedCategory);
setFilterSelectedCatIds([...filterSelectedCatIds, selectedCategory]);
localStorage.setItem("filterSelectedCatIds", JSON.stringify([...filterSelectedCatIds, selectedCategory]));
};


useEffect(() => {
const session = typeof window !== 'undefined' ? sessionStorage.getItem("token") : null;

if (session) {
setUserToken(JSON.parse(sessionStorage.getItem("token")))
}
}, []);

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


return (
<>
<div className="col-md-12">
<div className="select_section select_section_adv wow fadeInUp">
<input placeholder="Produktname" className="form-control" />

<SelectSearch
search="true"
autoComplete="on"
options={supplierOptions?.map((supplier, index) => ({
name: supplier.value,
value: supplier.value,
}))}
name="supplier"
placeholder="supplier"
/>
{/* <SelectSearch
search="true"
autoComplete="on"
options={allCategories}
name="category"
placeholder="category"
/> -----important----*/}

<SelectSearch
search="true"
autoComplete="on"
options={filteredCategories?.map((category, index) => ({
name: category.cat_name,
value: category.id,
}))}
name="category"
placeholder={t("category")}
//onInputChange={handleSearchInputChange}
onChange={handleSelectCategory}
/>
<Link
href= "/product/FilterProduct"
state=""
className="btn r-04 btn--theme hover--tra-white last-link">
{t("Further")}
</Link>
<button className="btn btn-submit" onClick={handleBackend}> {t("Add product name")}</button>

</div>
</div>
</>
);
};

export default AdvanceSearch;