import { Select,Empty } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
const { Option } = Select;

class SearchOptions extends React.Component {
  state = {};
  constructor(props) {
    super(props);
    const {list,defaultValue,disabled} = this.props;
    console.log(props)
    // console.log("重要的")
    this.state={
      data: [],
      value: defaultValue,
      initflag:false,
      list:list
    }
  }
  componentDidUpdate(){
    if(this.props.defaultValue!=null&&this.props.defaultValue!=this.state.value)
    {
      this.setState({value:this.props.defaultValue})                       
    }
  }
  handleSearch = value => {
    if (value&&value.length>0) {
      // console.log(value)
      // console.log(this.state.list)
      if(this.state.list!=null){
        var tmp=new Array()
        var rest=new Array()
        this.state.list.map((item,index)=>{
          if((item.toLowerCase()).indexOf(value.toLowerCase())>-1){
            if(item[0]==value[0]){              
              tmp.push(item)
            }else{
              rest.push(item)
            }
            if(this.props.titleSearch){
              if(item.toLowerCase()===value.toLowerCase()){
                this.props.onSubmit(value)
              }
            }
          }          
          this.setState({ data: tmp.concat(rest.sort()) });
        })            
      }
    } else {
      this.setState({ data: [] });
    }
  };

  handleChange = value => {
    this.setState({ value });
    // console.log(value)
    this.props.onSubmit(value)
  };
  nocontent=()=>{
    return(
      <div>
       
        <div>404</div>
      </div>      
    )
  }
  render() {
    const options = this.state.data.map(d => <Option key={d}>{d}</Option>);
    return (
      <Select
        showSearch
        value={this.state.value}
        placeholder={"Community Name"}
        optionFilterProp="children"
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        // style={this.props.style}
        // defaultActiveFirstOption={false}
        showArrow={true}
        // filterOption={false}
        onSearch={this.handleSearch}
        onChange={this.handleChange}      
        notFoundContent={<div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />Please enter the correct Community Name!</div>}
        style={{ width: 200 }}
        disabled={this.props.disabled}
        allowClear
      >
        {options}
      </Select>
    );
  }
}
export default SearchOptions;
// ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);

{/* <Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input, option) =>
  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>, */}

