import React, {Component} from 'react';
import { Form , Select } from 'antd';
import { Field } from 'formik';
import { Input } from 'components/Forms';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

class MultiSelectOptions extends Component {
  state= {
    value: []
  }

   handleChange(event){
    console.log(event)
    this.setState({value: event})
  }

  render() {
    const FormItem = Form.Item;
    const Option = Select.Option;
    const {
      field: { ...field },
      form: { touched, errors, ...form },
      required,
      icon,
      layout,
      withActionBtn,
      action,
      optionsList,
      ...props
      } = this.props;

  return (
    <FormItem
      {...layout}
      required={required}
      label={props.label}
      style={{marginBottom: '10px'}}
      validateStatus={touched[field.name] && errors[field.name] && 'error'}
      help={touched[field.name] && errors[field.name]}
    >
      <Select 
        style={{ width: '100%' }}
        placeholder="Select fuels."
        defaultValue={[]}
        onChange={(e)=>this.props.onChange (e)}
        optionLabelProp="label"
        mode="multiple"
      >
        {
          optionsList && (optionsList.map((item,i) => {
            return <Option value={item.id} key={`${i}-${field.name}`} label={item.name}>{item.name}</Option>
          }))
        }
      </Select>
    </FormItem>
  )};
};

export default MultiSelectOptions;