import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { Search } from '../src/index';

// function onSearch(v) {
//   console.log(v)
// }
const dataSource = [
  {
    label: 'Recent',
    value: 'Recent',
  },
  {
    label: 'dress',
    value: 'dress',
  },
  {
    label: 'sunglasses',
    value: 'sunglasses',
  },
  {
    label: 't-shirt',
    value: 't-shirt',
  },
];
function onSearch(value, filterValue) {
  console.log('onSearch', value, filterValue);
}

function onChange(value, type, e) {
  console.log('onChange', value, type, e);
  this.setState({
    value: value,
  });
}

storiesOf('Search', module).add('Search', () => {
  return (
    <div id="app-wrapper">
      <div id="app">
        <p key="1">simple</p>
        <Search key="2" shape="simple" onSearch={onSearch} style={{ width: '400px' }} size="small" disabled />
        <Search key="2" shape="simple" onSearch={onSearch} style={{ width: '400px' }} hasborder='false' />

        <p key="3">default</p>
        <Search key="4" onSearch={onSearch} style={{ width: '400px' }} />
        <Search key="4" onSearch={onSearch} filterProps={{ autoWidth: false }} filter={[
        {
          label: 'Products',
          value: 'Products'
        },
        {
          label: 'Products1',
          value: 'Products1'
        }]} style={{ width: '400px' }} hasborder='false' />

        
        <p key="5">custom text </p>
        <Search key="6" searchText="搜索" onSearch={onSearch} style={{ width: '400px' }} size="xs" />
        <p key="7">custom text widthout icon</p>
        <Search
          key="8"
          hasIcon={false}
          searchText={<span style={{ color: 'blue' }}>搜索</span>}
          onSearch={onSearch}
          style={{ width: '400px' }}
        />
        <div>
          auto highlight first item
          <br />
          <Search dataSource={dataSource} onChange={onChange} onSearch={onSearch} />
          <br />
          <br />
          no default highlight item, should use UP/DOWN
          <br />
          <Search key="4" size='medium' onSearch={onSearch} style={{width: '400px'}}/>,
          <div style={{ background: 'blue', padding: '20px' }}>
            <Search
              autoHighlightFirstItem={false}
              dataSource={dataSource}
              onChange={onChange}
              onSearch={onSearch}
              theme="dark"
              type="dark"
              size="small"
            />

            <Search
              autoHighlightFirstItem={false}
              dataSource={dataSource}
              onChange={onChange}
              onSearch={onSearch}
              theme="dark"
              size="small"
              shape="simple"
            />
            <br />
            <br />
            <Search
              autoHighlightFirstItem={false}
              dataSource={dataSource}
              onChange={onChange}
              onSearch={onSearch}
              theme="dark"
              size="small"
            />
          </div>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          
        </div>
        
      </div>
    </div>
  );
});
