Dwinzo_dev/app/src/components/layout/sidebarLeft/Assets.tsx

import React, { useEffect, useMemo, useState } from "react";
import Search from "../../ui/inputs/Search";
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";
import { useSelectedItem } from "../../../store/store";

// images -------------------
import vehicle from "../../../assets/image/categories/vehicles.png";
import workStation from "../../../assets/image/categories/workStation.png";
import machines from "../../../assets/image/categories/machines.png";
import feneration from "../../../assets/image/categories/feneration.png";
import worker from "../../../assets/image/categories/worker.png";
// -------------------------------------

interface AssetProp {
  filename: string;
  thumbnail?: string;
  category: string;
  description?: string;
  tags: string;
  url?: String;
  uploadDate?: number;
  isArchieve?: boolean;
  animated?: boolean;
  price?: number;
  CreatedBy?: String;
}
interface CategoryListProp {
  assetImage?: string;
  assetName?: string;
  categoryImage: string;
  category: string;
}
const Assets: React.FC = () => {
  const { setSelectedItem } = useSelectedItem();
  const [searchValue, setSearchValue] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
  const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);

  const handleSearchChange = (value: string) => {
    const searchTerm = value.toLowerCase();
    setSearchValue(value);
    if (searchTerm.trim() === "" && !selectedCategory) {
      setCategoryAssets([]);
      return;
    }
    const filteredModels = filtereredAssets?.filter((model) => {
      if (!model?.tags || !model?.filename || !model?.category) return false;
      if (searchTerm.startsWith(":") && searchTerm.length > 1) {
        const tagSearchTerm = searchTerm.slice(1);
        return model.tags.toLowerCase().includes(tagSearchTerm);
      } else if (selectedCategory) {
        return (
          model.category
            .toLowerCase()
            .includes(selectedCategory.toLowerCase()) &&
          model.filename.toLowerCase().includes(searchTerm)
        );
      } else {
        return model.filename.toLowerCase().includes(searchTerm);
      }
    });

    setCategoryAssets(filteredModels);
  };
  useEffect(() => {
    const filteredAssets = async () => {
      try {
        const filt = await fetchAssets();
        setFiltereredAssets(filt);
      } catch {}
    };
    filteredAssets();
  }, [categoryAssets]);

  useEffect(() => {
    setCategoryList([
      {
        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);
        setFiltereredAssets(res);
      } catch (error) {}
    }
  };
  return (
    <div className="assets-container">
      <Search onChange={handleSearchChange} />
      {searchValue ? (
        <div className="assets-result">
          <div className="assets-wrapper">
            <div className="searched-content">
              <p>Results for {searchValue}</p>
            </div>
          </div>
          <div className="assets-container">
            {categoryAssets &&
              categoryAssets?.map((asset: any, index: number) => (
                <div
                  key={index}
                  className="assets"
                  id={asset.filename}
                  title={asset.filename}
                >
                  <img
                    src={asset?.thumbnail}
                    alt={asset.filename}
                    className="asset-image"
                  />

                  <div className="asset-name">
                    {asset.filename
                      .split("_")
                      .map(
                        (word: any) =>
                          word.charAt(0).toUpperCase() + word.slice(1)
                      )
                      .join(" ")}
                  </div>
                </div>
              ))}
          </div>
        </div>
      ) : selectedCategory ? (
        <div className="assets-wrapper">
          <div
            className="back-button"
            id="asset-backButtom"
            onClick={() => {
              setSelectedCategory(null);
              setCategoryAssets([]);
            }}
          >
            ← Back
          </div>
          <h2>{selectedCategory}</h2>
          <div className="assets-container">
            {categoryAssets &&
              categoryAssets?.map((asset: any, index: number) => (
                <div
                  key={index}
                  className="assets"
                  id={asset.filename}
                  title={asset.filename}
                >
                  <img
                    src={asset?.thumbnail}
                    alt={asset.filename}
                    className="asset-image"
                    onPointerDown={() => {
                      setSelectedItem({
                        name: asset.filename,
                        id: asset.AssetID,
                        type:
                          asset.type === "undefined" ? undefined : asset.type,
                      });
                    }}
                  />

                  <div className="asset-name">
                    {asset.filename
                      .split("_")
                      .map(
                        (word: any) =>
                          word.charAt(0).toUpperCase() + word.slice(1)
                      )
                      .join(" ")}
                  </div>
                </div>
              ))}
          </div>
        </div>
      ) : (
        <div className="assets-wrapper">
          <h2>Categories</h2>
          <div className="categories-container">
            {Array.from(
              new Set(categoryList.map((asset) => asset.category))
            ).map((category, index) => {
              const categoryInfo = categoryList.find(
                (asset) => asset.category === category
              );
              return (
                <div
                  key={index}
                  className="category"
                  id={category}
                  onClick={() => fetchCategoryAssets(category)}
                >
                  <img
                    src={categoryInfo?.categoryImage || ""}
                    alt={category}
                    className="category-image"
                    draggable={false}
                  />
                  <div className="category-name">{category}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

export default Assets;