import React, { useEffect, useMemo, useState } from "react"; import Search from "../../ui/inputs/Search"; import vehicle from "../../../assets/image/vehicles.png"; import workStation from "../../../assets/image/workStation.png"; import machines from "../../../assets/image/machines.png"; import feneration from "../../../assets/image/feneration.png"; import worker from "../../../assets/image/worker.png"; import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset"; import arch from "../../../assets/gltf-glb/arch.glb"; import door from "../../../assets/gltf-glb/door.glb"; import window from "../../../assets/gltf-glb/window.glb"; interface AssetProp { filename: string; thumbnail?: string; category: string; description?: string; tags?: string; url?: String; uploadDate?: number; isArchieve?: boolean; animated?: boolean; price?: number; CreatedBy?: String; } const Assets: React.FC = () => { const [searchValue, setSearchValue] = useState(""); const [selectedCategory, setSelectedCategory] = useState(null); const [filteredAsset, setFilteredAsset] = useState([]); const handleSearchChange = (value: string) => { setSearchValue(value); setSelectedCategory(null); // Reset selected category when search changes }; const categoryList = useMemo( () => [ { assetName: "Doors", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Windows", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Pillars", assetImage: "", category: "Feneration", categoryImage: feneration, }, { category: "Vehicles", categoryImage: vehicle }, { category: "Workstation", categoryImage: workStation }, { category: "Machines", categoryImage: machines }, { category: "Workers", categoryImage: worker }, ], [] ); const fetchCategoryAssets = async (asset: any) => { setSelectedCategory(asset); if (asset === "Feneration") { const localAssets: AssetProp[] = [ { filename: "arch", category: "Feneration", url: arch, }, { filename: "door", category: "Feneration", url: door, }, { filename: "window", category: "Feneration", url: window, }, ]; setFilteredAsset(localAssets); } else { try { const res = await getCategoryAsset(asset); setFilteredAsset(res || []); // Ensure it's always an array } catch (error) {} } }; useEffect(() => {}, [filteredAsset]); return (
{searchValue ? (

Results for "{searchValue}"

) : selectedCategory ? (
{/* Back Button */}
setSelectedCategory(null)} > ← Back

{selectedCategory}

{filteredAsset && filteredAsset?.map((asset: any, index: number) => (
{asset?.thumbnail && ( {asset.filename} )}
{asset.filename .split("_") .map( (word: any) => word.charAt(0).toUpperCase() + word.slice(1) ) .join(" ")}
))}
) : (

Categories

{Array.from( new Set(categoryList.map((asset) => asset.category)) ).map((category, index) => { const categoryInfo = categoryList.find( (asset) => asset.category === category ); return (
fetchCategoryAssets(category)} > {category}
{category}
); })}
)}
); }; export default Assets;