import React, { 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";
const Assets: React.FC = () => {
  const [searchValue, setSearchValue] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  const handleSearchChange = (value: string) => {
    setSearchValue(value);
    setSelectedCategory(null); // Reset selected category when search changes
  };

  const categoryList = [
    {
      assetName: "Doors",
      assetImage: "",
      category: "Feneration",
      categoryImage: feneration,
    },
    {
      assetName: "Windows",
      assetImage: "",
      category: "Feneration",
      categoryImage: feneration,
    },
    {
      assetName: "Pillars",
      assetImage: "",
      category: "Feneration",
      categoryImage: feneration,
    },
    {
      assetName: "Forklift",
      assetImage: "",
      category: "Vehicles",
      categoryImage: vehicle,
    },
    {
      assetName: "AGV",
      assetImage: "",
      category: "Vehicles",
      categoryImage: vehicle,
    },
    {
      assetName: "Pallet",
      assetImage: "",
      category: "Workstation",
      categoryImage: workStation,
    },
    {
      assetName: "Controller",
      assetImage: "",
      category: "Workstation",
      categoryImage: workStation,
    },
    {
      assetName: "Conveyor",
      assetImage: "",
      category: "Workstation",
      categoryImage: workStation,
    },
    {
      assetName: "VMC",
      assetImage: "",
      category: "Machines",
      categoryImage: machines,
    },
    {
      assetName: "CMC",
      assetImage: "",
      category: "Machines",
      categoryImage: machines,
    },
    {
      assetName: "Male Worker",
      assetImage: "",
      category: "Workers",
      categoryImage: worker,
    },
    {
      assetName: "Female Worker",
      assetImage: "",
      category: "Workers",
      categoryImage: worker,
    },
  ];

  // Get unique categories
  const uniqueCategories = Array.from(
    new Set(categoryList.map((asset) => asset.category))
  );

  // Filter assets based on the selected category
  const filteredAssets =
    selectedCategory !== null
      ? categoryList.filter((asset) => asset.category === selectedCategory)
      : [];

  return (
    <div className="assets-container">
      <Search onChange={handleSearchChange} />
      {searchValue ? (
        <div className="searched-content">
          <p>Results for "{searchValue}"</p>
        </div>
      ) : selectedCategory ? (
        <div className="assets-wrapper">
          {/* Back Button */}
          <div
            className="back-button"
            onClick={() => setSelectedCategory(null)}
          >
            ← Back
          </div>
          <h2>{selectedCategory}</h2>
          <div className="assets-container">
            {filteredAssets.map((asset, index) => (
              <div key={index} className="assets">
                <img
                  src={asset.assetImage}
                  alt={asset.assetName}
                  className="asset-image"
                />
                <div className="asset-name">{asset.assetName}</div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="assets-wrapper">
          <h2>Categories</h2>
          <div className="categories-container">
            {uniqueCategories.map((category, index) => {
              const categoryInfo = categoryList.find(
                (asset) => asset.category === category
              );
              return (
                <div
                  key={index}
                  className="category"
                  onClick={() => setSelectedCategory(category)}
                >
                  <img
                    src={categoryInfo?.categoryImage || ""}
                    alt={category}
                    className="category-image"
                  />
                  <div className="category-name">{category}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

export default Assets;