import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Select } from 'antd';
//import { mapListData } from '@/hooks/useMapList';
import { SearchOutlined } from '@ant-design/icons';
import { useModel } from 'umi';
type mapResType = {
  text: string;
  value: string;
};
const { Option } = Select;

type SearchInputProps = {
  onSearch: (s: string) => void;
  mapList: API.MapInfo[];
};
const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
  const [matchData, setMatchData] = useState<mapResType[]>([]);
  const [value, setValue] = useState<any>();
  // const { mapList } = useModel('map');

  //这是搜索 的下拉列表的显示
  const handleSearch = (value: string) => {
    //debugger;
    if (value) {
      let data: mapResType[] = [];
      mapList.map((item, index) => {
        if ((item.localName || '').indexOf(value) > -1) {
          data.push({
            text: item.localName,
            value: item.localName,
          });
        }
      });
      setMatchData(data);
      console.log('search', data);
    } else {
      setMatchData([]);
    }
  };

  //这是搜索的下拉列表的点击
  const handleChange = (sel: string) => {
    //debugger;
    setValue(null); //清空输入的值
    setMatchData([]); //清空搜索匹配列表
    onSearch(sel);
  };
  const handelInputKeyDown = (e) => {
    // 如果点击回车的操作
    console.log('keydown', matchData);
    if (e.code == 'Enter') {
      if (matchData.length == 1) {
        onSearch(matchData[0].text);
      }
    }
  };
  return (
    <div className={styles.headerSearch}>
      <SearchOutlined style={{ fontSize: 16 }} />
      <Select
        showSearch
        value={value}
        placeholder="搜索空间"
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={handleSearch}
        onChange={handleChange}
        onInputKeyDown={handelInputKeyDown}
        notFoundContent={null}
        bordered={false}
        style={{ width: 150, borderColor: '#c4c4c4' }}
        //   suffixIcon={
        //     <AudioOutlined
        //       style={{
        //         fontSize: 16,
        //         color: '#1890ff',
        //       }}
        //     />
        //   }
      >
        {matchData.map(function (item, index) {
          return <Option key={item.value}>{item.text}</Option>;
        })}
      </Select>
    </div>
  );
};

export default SearchInput;
