import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';

const dataSource = [
  { value: '10001', label: 'Lucy King' },
  { value: 10002, label: 'Lily King' },
  { value: 10003, label: 'Tom Cat', disabled: true },
  {
    label: 'Special Group',
    children: [
      { value: -1, label: 'FALSE' },
      { value: 0, label: 'ZERO' },
    ],
  },
];
function handleChange(value) {
  console.log(value);
}

ReactDOM.render(
  <div>
    <Select
      size='large'
      mode="multiple"
      showSearch
      defaultValue={[ '10001' ]}
      onChange={handleChange}
      dataSource={dataSource}
      style={{ width: '300px', marginRight: 8 }}
    />
    <br />
    <br />
    <Select
      size='medium'
      mode="multiple"
      showSearch
      defaultValue={[ '10001' ]}
      onChange={handleChange}
      dataSource={dataSource}
      style={{ width: '300px', marginRight: 8 }}
    />
    <br />
    <br />
    <Select
      size='small'
      mode="multiple"
      showSearch
      defaultValue={[ '10001' ]}
      onChange={handleChange}
      dataSource={dataSource}
      style={{ width: '300px', marginRight: 8 }}
    />
    <br />
    <br />
    <Select
      size='xs'
      mode="multiple"
      disabled
      showSearch
      defaultValue={[ '10001' ]}
      onChange={handleChange}
      dataSource={dataSource}
      style={{ width: '300px', marginRight: 8 }}
    />
    <br />
    <br />
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <Select
        size='large'
        mode="multiple"
        showSearch
        theme='grey'
        defaultValue={[ '10001' ]}
        onChange={handleChange}
        dataSource={dataSource}
        style={{ width: '300px', marginRight: 8 }}
      />
      <br />
      <br />
      <Select
        size='medium'
        mode="multiple"
        showSearch
        theme='grey'
        defaultValue={[ '10001' ]}
        onChange={handleChange}
        dataSource={dataSource}
        style={{ width: '300px', marginRight: 8 }}
      /><br />
      <br />
      <Select
        size='small'
        mode="multiple"
        showSearch
        theme='grey'
        defaultValue={[ '10001' ]}
        onChange={handleChange}
        dataSource={dataSource}
        style={{ width: '300px', marginRight: 8 }}
      />
      <br />
      <br />
      <Select
        size='xs'
        mode="multiple"
        showSearch
        theme='grey'
        defaultValue={[ '10001' ]}
        onChange={handleChange}
        dataSource={dataSource}
        style={{ width: '300px', marginRight: 8 }}
      />


    </div>
  </div>,
  document.getElementById('select-demo-2'),
);