import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import {
  SearchBarContainer,
  SearchInput,
  SearchIcon,
  WarningText,
  SuggestionList,
  SuggestionItem,
  Container,
} from "./styles";
import { SearchFilterIcon } from "./svg/searchFilter";
import { SearchSvg } from "./svg/search-normal";

const SearchBar = ({
  onSubmit,
  warning,
  asyncResult,
  inFilter,
  outFilter,
  searchIcon,
  debounceDelay = 500, // Default debounce delay
  ...restProps
}) => {
  const [searchValue, setSearchValue] = useState("");
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [suggestions, setSuggestions] = useState([]);

  const handleInputChange = async (event) => {
    const value = event.target.value;
    setSearchValue(value);

    if (asyncResult) {
      const suggestions = await asyncResult(value);
      setSuggestions(suggestions);
      setShowSuggestions(true);
    }
  };

  useEffect(() => {
    const handler = setTimeout(() => {
      onSubmit(searchValue);
    }, debounceDelay);

    return () => clearTimeout(handler);
  }, [searchValue, onSubmit, debounceDelay]);

  const handleSuggestionClick = (suggestion) => {
    setSearchValue(suggestion);
    setShowSuggestions(false);
    restProps.onSuggestionClick && restProps.onSuggestionClick(suggestion);
  };

  return (
    <Container>
      <SearchBarContainer 
        heightSize={restProps.heightSize}
        widthSize={restProps.widthSize}
        borderRadius={restProps.borderRadius}
        border={restProps.border}
        outlineColor={restProps.outlineColor}
      >
        <SearchIcon  
          onClick={(e) => {
              e.preventDefault();
              onSubmit(searchValue);
          }}>
          {searchIcon || <SearchSvg />}
        </SearchIcon>
       
        <SearchInput
          type="search"
          placeholder={restProps.placeholder || "Search by Name / Email / Username"}
          value={searchValue}
          onChange={handleInputChange}
          borderRadius={restProps.borderRadius || "12px"}
          border={restProps.border || "1px solid #DFE6E6"}
          heightSize={restProps.heightSize || "50px"}
          widthSize={restProps.widthSize || "100%"}
        />
        {showSuggestions && (
          <SuggestionList>
            {suggestions.map((suggestion) => (
              <SuggestionItem
                key={suggestion}
                onClick={() => handleSuggestionClick(suggestion)}
              >
                {suggestion}
              </SuggestionItem>
            ))}
          </SuggestionList>
        )}
        {warning && <WarningText>{warning}</WarningText>}
        {inFilter && 
         <SearchFilterIcon />
        }
      </SearchBarContainer>
       {outFilter && 
         <SearchFilterIcon />
        }
    </Container>
  );
};

SearchBar.propTypes = {
  // onSubmit: PropTypes.func.isRequired,
  onSubmit: PropTypes.func,
  warning: PropTypes.string,
  asyncResult: PropTypes.func,
  heightSize: PropTypes.string,
  widthSize: PropTypes.string,
  borderRadius: PropTypes.string,
  border: PropTypes.string,
  outlineColor: PropTypes.string,
  inFilter: PropTypes.bool,
  outFilter: PropTypes.bool,
  debounceDelay: PropTypes.number,
};

export default SearchBar;
