import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';
const Option = Select.Option;

const onChange = function(value) {
  console.log(value);
};

const onToggleHighlightItem = function() {
  console.log('onToggleHighlightItem');
};

const onFocus = () => {
  console.log('focus');
};

const onBlur = () => {
  console.log('blur');
};
ReactDOM.render(
  <div>
    <Select
      id="basic-demo"
      onChange={onChange}
      onToggleHighlightItem={onToggleHighlightItem}
      defaultValue="jack"
      onFocus={onFocus}
      onBlur={onBlur}
      aria-label="name is"
      style={{ marginRight: 8 }}
      size='xs'
    >
      <Option value="jack">Jack</Option>
      <Option value="frank">Frank</Option>
      <Option value="hugo">Hugo</Option>
    </Select>

    <Select defaultValue="clear" hasClear size='small' style={{ marginRight: 8 }}>
      <Option value="jack">Jack</Option>
      <Option value="frank">Frank</Option>
      <Option value="clear">clear</Option>
    </Select>

    <Select
      placeholder="show search"
      showSearch
      hasClear
      size='medium'
      style={{ marginRight: 8 }}
    >
      <Option value="jack">Jack</Option>
      <Option value="frank">Frank</Option>
      <Option value="hugo">Hugo</Option>
    </Select>

    <Select disabled defaultValue="frank" size='large' style={{ marginRight: 8 }}>
      <Option value="jack">Jack</Option>
      <Option value="frank">Frank</Option>
      <Option value="hugo">Hugo</Option>
    </Select>
    <br />
    <br />
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <Select
        id="basic-demo"
        onChange={onChange}
        onToggleHighlightItem={onToggleHighlightItem}
        defaultValue="jack"
        onFocus={onFocus}
        onBlur={onBlur}
        aria-label="name is"
        style={{ marginRight: 8 }}
        size='xs'
        theme='grey'
      >
        <Option value="jack">Jack</Option>
        <Option value="frank">Frank</Option>
        <Option value="hugo">Hugo</Option>
      </Select>

      <Select defaultValue="clear" hasClear size='small' style={{ marginRight: 8 }} theme='grey'>
        <Option value="jack">Jack</Option>
        <Option value="frank">Frank</Option>
        <Option value="clear">clear</Option>
      </Select>

      <Select
        placeholder="show search"
        showSearch
        hasClear
        size='medium'
        theme='grey'
        style={{ marginRight: 8 }}
      >
        <Option value="jack">Jack</Option>
        <Option value="frank">Frank</Option>
        <Option value="hugo">Hugo</Option>
      </Select>

      <Select disabled defaultValue="frank" size='large' theme='grey' style={{ marginRight: 8 }}>
        <Option value="jack">Jack</Option>
        <Option value="frank">Frank</Option>
        <Option value="hugo">Hugo</Option>
      </Select>
    </div>
  </div>,
  document.getElementById('select-demo-1'),
);