import React, { useEffect, useState } from "react";
// import RegularDropDown from "./ui/inputs/RegularDropDown";

import Search from "../../components/ui/inputs/Search";
import { StarsIcon } from "../../components/icons/marketPlaceIcons";
import RegularDropDown from "../../components/ui/inputs/RegularDropDown";
import { getSortedAssets } from "../../services/marketplace/getSortedAssets";
interface ModelData {
  CreatedBy: string;
  animated: string | null;
  category: string;
  description: string;
  filename: string;
  isArchieve: boolean;
  modelfileID: string;
  tags: string;
  thumbnail: string;
  uploadDate: number;
  _id: string;
  price: number;
}
interface ModelsProps {
  models: ModelData[];
  setModels: React.Dispatch<React.SetStateAction<ModelData[]>>;
  filteredModels: ModelData[];
}
const FilterSearch: React.FC<ModelsProps> = ({
  models,
  setModels,
  filteredModels,
}) => {
  const [activeOption, setActiveOption] = useState("Sort by"); // State for active option

  const handleSelect = (option: string) => {
    setActiveOption(option);

    // Alphabet ascending
    // Alphabet descending
    // All
  };
  useEffect(() => {
    if (activeOption == "Alphabet ascending") {
      let ascending = models
        ?.slice()
        .sort((a, b) => a.filename.localeCompare(b.filename))
        .map((val) => val);
      setModels(ascending);
    } else if (activeOption == "Alphabet descending") {
      let descending = models
        ?.slice()
        .sort((a, b) => b.filename.localeCompare(a.filename))
        .map((val) => val);
      setModels(descending);
    }
  }, [activeOption]);
  const handleSearch = (val: string) => {
    const filteredModel = filteredModels?.filter((model) =>
      model.filename.toLowerCase().includes(val.toLowerCase())
    );
    setModels(filteredModel);
  };

  return (
    <div className="filter-search-container">
      <Search onChange={handleSearch} />
      <RegularDropDown
        header={activeOption}
        options={["Alphabet ascending", "Alphabet descending", ""]}
        onSelect={handleSelect}
        search={false}
      />
      <div className="button">Free</div>
      <div className="button">Animated</div>
      <div className="rating-container">
        <div className="label">Rating</div>
        <div className="stars">
          <StarsIcon />
          <StarsIcon />
          <StarsIcon />
          <StarsIcon />
          <StarsIcon />
        </div>
      </div>
    </div>
  );
};

export default FilterSearch;
