import { SearchBar } from "@nutui/nutui-react-taro";
import { View, Text, Image } from "@tarojs/components";
import img from "../../config/images";
import styles from "./index.module.scss";

interface IProps {
  handleFilterIcon: () => void;
  isSelect: boolean;
  filterCount: number;
  onChange: (value: string) => void;
}

const SearchBarComponent = (props: IProps) => {
  const { handleFilterIcon, isSelect, filterCount, onChange } = props;

  const handleChange = (value: string) => {
    onChange && onChange(value);
  };
  return (
    <>
      <SearchBar
        leftIn={
          <View className={styles.searchBarLeft}>
            <Image className={styles.searchIcon} src={img.ICON_SEARCH} />
          </View>
        }
        right={
          <View
            className={`${styles.searchBarRight} ${
              isSelect ? styles.active : ""
            }`}
            onClick={handleFilterIcon}
          >
            <Image
              src={isSelect ? img.ICON_FILTER_SELECTED : img.ICON_FILTER}
              className={styles.filterIcon}
            />
            {isSelect && (
              <Text className={styles.filterCount}>{filterCount}</Text>
            )}
          </View>
        }
        className={styles.searchBar}
        placeholder="搜索上海的球局和场地"
        onChange={handleChange}
      />
    </>
  );
};

export default SearchBarComponent;