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"; import { fetchAssets } from "../../../services/marketplace/fetchAssets"; 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 [categoryAssets, setCategoryAssets] = useState([]); const [filtereredAssets, setFiltereredAssets] = useState([]); const handleSearchChange = (value: string) => { setSearchValue(value); setSelectedCategory(null); const filteredModels = filtereredAssets?.filter((model) => model.filename.toLowerCase().includes(value.toLowerCase()) ); setCategoryAssets(filteredModels); }; useEffect(() => { const filteredAssets = async () => { try { const filt = await fetchAssets(); setFiltereredAssets(filt); } catch {} }; filteredAssets(); }, []); 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, tags: "arch", }, { filename: "door", category: "Feneration", url: door, thumbnail: feneration, tags: "door", }, { filename: "window", category: "Feneration", url: window, tags: "window", }, ]; setCategoryAssets(localAssets); setFiltereredAssets(localAssets); } else { try { const res = await getCategoryAsset(asset); setCategoryAssets(res || []); // Ensure it's always an array setFiltereredAssets(res || []); } catch (error) {} } }; return (
{searchValue ? (

Results for "{searchValue}"

{categoryAssets && categoryAssets?.map((asset: any, index: number) => (
{asset.filename}
{asset.filename .split("_") .map( (word: any) => word.charAt(0).toUpperCase() + word.slice(1) ) .join(" ")}
))}
) : selectedCategory ? (
{/* Back Button */}
{ setSelectedCategory(null); setCategoryAssets([]); }} > ← Back

{selectedCategory}

{searchValue || (categoryAssets && categoryAssets?.map((asset: any, index: number) => (
{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;