import * as React from 'react';
import { Select, Row, Col } from '@btri-ui/base';
import debounce from 'lodash/debounce';

const onChange = (value: string) => {
  console.log(`selected ${value}`);
};

const data = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
  { label: '选项四', value: '4' },
  { label: '选项五', value: '5' },
  { label: '选项六', value: '6' },
];

export default () => {
  const [options, setOptions] = React.useState(data);

  const onSearch = (value: string) => {
    if (!options.filter(item => item.label.includes(value)).length) {
      setOptions(prev => [...prev, { label: value, value }]);
    }
  };

  return (
    <Row>
      <Col xs={{ span: 24 }} lg={{ span: 8 }}>
        <Select
          style={{ width: '100%' }}
          showSearch
          placeholder="选择"
          optionFilterProp="label"
          onChange={onChange}
          onSearch={debounce(onSearch, 1000)}
          filterOption={(input, option) => {
            return ((option!.label as unknown) as string)
              .toLowerCase()
              .includes(input.toLowerCase());
          }}
          options={options}
        ></Select>
      </Col>
    </Row>
  );
};