import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { LoadingSpinner } from 'apps/frontend/src/components/loading-spinner';
import { Loader } from 'lucide-react';


export interface SearchBarProps {
  stateSetter: Dispatch<SetStateAction<ISearchBarResult>>;
}
export interface ISearchBarResult {
  value: string;
}

export function SearchBar(props: SearchBarProps) {
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {

    setIsLoading(true);
    const timer = setTimeout(() => {
      props.stateSetter({value: inputValue});
      setIsLoading(false);
    }, 750);

    // Nettoyage du timer
    return () => clearTimeout(timer);
  }, [inputValue]);
  return (<div className="flex gap-2">
    <div className="grid w-full max-w-md items-center gap-1.5">
      <Label htmlFor="searchFiled">Chercher un nom de fichier</Label>
      <Input
        type="search"
        id="searchFiled"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Votre recherche..." />
    </div>
    {isLoading && <Loader className={"w-6 h-6 animate-spin"} />}
  </div>)
}