import {FC, useEffect, useState} from "react";
import {Input, Text, View} from "@tarojs/components";
import Icon, {icons, IconName} from './index'

const IconList: FC = () => {
  const [list, setList] = useState<IconName[]>(icons)
  const [keyword, setKeyword] = useState("")

  useEffect(() => {
    setList(() => {
      if (!keyword) return [...icons]
      return icons.filter(name => name.includes(keyword));
    });
  }, [keyword])

  return (
    <View>
      <View>
        <Text>关键字：</Text>
        <Input style={{border: '1px solid #ddd', marginBottom: "12px", padding: '8px'}} onInput={(e) => setKeyword(e.detail.value)}/>
      </View>
      <View style={{display:"flex", flexWrap:'wrap'}}>
        {list.map((name) => (
          <View style={{display: "flex", flexDirection: 'column', alignItems: "center", justifyContent: 'center', width: '100px', height: '100px', border: '1px solid #ddd'}}>
            <Icon name={name} size={26}/>
            <Text>{name}</Text>
          </View>
        ))}
      </View>
    </View>
  )
}

export default IconList
