import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Select, Balloon,Icon } from "../src/index";

const { Option, OptionGroup } = Select;

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

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

const onBlur = () => {
  console.log("blur");
};

const { Tooltip } = Balloon

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' }
    ]
  },
  {
    label: '',
    children: [
      { value: -1, label: 'FALSE' },
      { value: 0, label: 'ZERO' }
    ]
  }
]
const dataSource3 = [
  { value: '#FF0000', label: 'red', title: 'red' },
  { value: '#00AA00', label: 'green', title: 'green' },
  { value: '#B482DB', label: 'purple', title: 'purple' },
  { value: '#F17334', label: 'orange', title: 'orange' },
  { value: '#66CCFF', label: 'blue', title: 'blue' }
]
const itemRender = (item) => {
  return (
    <span>
      <Icon type="account" size="xs" style={{ color: item.value }} />
      <Icon type="account" size="xs" style={{ color: item.value }} />
      <Icon type="account" size="xs" style={{ color: item.value }} />
      <Icon type="account" size="xs" style={{ color: item.value }} />
      <Icon type="account" size="xs" style={{ color: item.value }} />
    </span>
  )
}
const valueRender = (item) => {
  return (
    <span>
      <Icon type="account" size="xs" style={{ color: item.value }} />{' '}
      {item.label}
    </span>
  )
}
function handleChange(value) {
  console.log(value)
}

const maxTagPlaceholder = (selectedValues, totalValues) => {
  const trigger = (
    <span>{`${selectedValues.length}/${totalValues.length}`}</span>
  )
  const labels = selectedValues.map((obj) => obj.label)

  return <Tooltip trigger={trigger}>{labels.join(', ')}</Tooltip>
}

storiesOf("Select", module).add("Select", () => {
  return (
    <div id='app-wrapper'>
      <div id='app' style={{ padding: '16px' }}>
        <Select
          id='basic-demo'
          onChange={onChange}
          defaultValue='jack'
          onFocus={onFocus}
          onBlur={onBlur}
          aria-label='name is'
          // theme='dark'
          hasBorder={false}
          style={{ width: 200 }}
          hasClear={true}
          size='large'
        >
          <Option value='jack'>Jack</Option>
          <Option value='frank'>Frank</Option>
          <Option value='hugo'>Hugo</Option>
          <OptionGroup label="group1">
          <Option value="small">Small</Option>
          <Option value="medium">Medium</Option>
          <Option value="large">Large</Option>
        </OptionGroup>
        <OptionGroup label="">
          <Option value="small">Small</Option>
          <Option value="medium">Medium</Option>
          <Option value="large">Large</Option>
        </OptionGroup>
        <OptionGroup label=" ">
          <Option value="small">Small</Option>
          <Option value="medium">Medium</Option>
          <Option value="large">Large</Option>
        </OptionGroup>
        </Select>
        <Select
          id='basic-demo'
          onChange={onChange}
          defaultValue='jack'
          onFocus={onFocus}
          onBlur={onBlur}
          aria-label='name is'
          // theme='dark'
          hasBorder={false}
          style={{ width: 200 }}
          size='medium'
        >
          <Option value='jack'>Jack</Option>
          <Option value='frank'>Frank</Option>
          <Option value='hugo'>Hugo</Option>
        </Select>
        <Select
          id='basic-demo'
          onChange={onChange}
          defaultValue='jack'
          onFocus={onFocus}
          onBlur={onBlur}
          aria-label='name is'
          // theme='dark'
          hasBorder={false}
          style={{ width: 200 }}
          size='small'
        >
          <Option value='jack'>Jack</Option>
          <Option value='frank'>Frank</Option>
          <Option value='hugo'>Hugo</Option>
        </Select>
        <div>
          hasSelectAll:
          <br />
          <Select
            hasSelectAll
            hasBorder={false}
            mode="multiple"
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
            hasTick='false'
          />
          <br />
          <br />
          maxTagCount=2
          <br/>
          <Select
            size="large"
            maxTagCount={2}
            defaultValue={['10001', '10002', '-1']}
            mode="multiple"
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
          />
          <br/>
          <br/>
          <Select
            size="medium"
            maxTagCount={2}
            defaultValue={['10001', '10002', '-1']}
            mode="multiple"
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
          />
          <br/>
          <br/>
          <Select
            size="small"
            maxTagCount={2}
            defaultValue={['10001', '10002', '-1']}
            mode="multiple"
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
          />
          <br />
          <br />
          maxTagPlaceholder
          <br />
          <Select
            maxTagCount={2}
            maxTagPlaceholder={maxTagPlaceholder}
            defaultValue={['10001', '10002', '-1']}
            mode="multiple"
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
          />
          <br />
          <br />
          tagInline <br />
          <Select
            maxTagCount={2}
            tagInline
            mode="multiple"
            defaultValue={['10001', '10002', '-1']}
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
          />
          <br />
          <br />
          maxTagPlaceholder
          <br />
          <Select
            maxTagCount={2}
            tagInline
            maxTagPlaceholder={maxTagPlaceholder}
            defaultValue={['10001', '10002', '-1']}
            mode="multiple"
            onChange={handleChange}
            dataSource={dataSource}
            style={{ width: 200 }}
          />
          <br />
          <br />
        </div>
        <Select
        dataSource={dataSource3}
        itemRender={itemRender}
        valueRender={valueRender}
        placeholder="pick your color"
      />
      </div>
    </div>
  );
});