import React from 'react';
import { Select } from 'antd';
const { Option } = Select;

const SearchOptionsTow = (porps: any) => {
  const { list, extendName, def, type, disabled } = porps;

  const options = list.map((d: any, index: number) => (
    <Option value={d} key={index}>
      {d}
    </Option>
  ));
  function onChange(value: any) {
    // console.log(`selected ${value}`);
    if (!value) {
      value = '';
    }
    extendName(value);
  }
  return (
    <div>
      {type ? (
        <Select
          showSearch
          allowClear
          mode="multiple"
          autoClearSearchValue
          style={{ width: 320 }}
          placeholder="Community Name"
          optionFilterProp="children"
          onChange={onChange}
          defaultValue={def ? def : null}
          disabled={disabled}
        >
          {options}
        </Select>
      ) : (
        <Select
          showSearch
          allowClear
          style={{ width: 200 }}
          placeholder="Community Name"
          optionFilterProp="children"
          onChange={onChange}
          defaultValue={def ? def : null}
          disabled={disabled}
        >
          {options}
        </Select>
      )}
    </div>
  );
};

export default SearchOptionsTow;
