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

const { Group: TagGroup, Closeable: CloseableTag, Selectable: SelectableTag } = Tag

const handler = (from) => {
  console.log(`close from ${from}`)
  return false
}

const presetColors = ['blue', 'green', 'orange', 'red', 'turquoise', 'yellow', '#D9D9D9']
// set custom color with hex value, do not use color keywords
const customColos = ['#f50', '#2db7f5', '#87d068', '#108ee9']

storiesOf("Tag", module).add("Tag", () => {
  return (
    <div id='app-wrapper'>
      <div id='app' style={{ padding: '16px' }}>
      <TagGroup>
        <Tag type="normal" size="small">
          Normal Small Tag
        </Tag>
        <Tag type="primary" size="small">
          Primary Small Tag
        </Tag>
        <Tag size="small">
          <Icon type="smile" /> Tag With Icon
        </Tag>
      </TagGroup>
        <div className="tag-list">
          <h4>type: 'normal'</h4>
          <TagGroup>
            <CloseableTag key={'tag-1'} type='normal' size="large">
              'normal'
            </CloseableTag>
            <CloseableTag key={'tag-1'} type='normal' size="medium">
              'normal'
            </CloseableTag>
            <CloseableTag key={'tag-1'} type='normal' size="small">
              'normal'
            </CloseableTag>
            <CloseableTag key={'tag-2'} type='normal' disabled>
              {'normal'} {' disabled '}
            </CloseableTag>
          </TagGroup>
          <h4>close handler</h4>
          <TagGroup>
            <CloseableTag onClose={() => true}> onClose allow close</CloseableTag>
            <CloseableTag onClose={() => false}>
              {' '}
              onClose prevent close
            </CloseableTag>
            <CloseableTag onClose={handler}> onClose from </CloseableTag>
            <CloseableTag afterClose={() => console.log('after close')}>
              after Close
            </CloseableTag>
          </TagGroup>
          <h4>closeable link tag</h4>
          <TagGroup>
            <CloseableTag type="primary">
              <a href="//www.alibaba.com" target="_blank">
                Primary Link Tag
              </a>
            </CloseableTag>
            <CloseableTag type="normal">
              <a href="//www.alibaba.com" target="_blank">
                normal Link Tag
              </a>
            </CloseableTag>
          </TagGroup>
        </div>
        <div className="tag-list">
          <h4>presets</h4>
          <TagGroup>
            {presetColors.map((color) => (
              <Tag key={`p_n_${color}`} type="normal" color={color}>
                {color}
              </Tag>
            ))}
          </TagGroup>

          <TagGroup>
            {presetColors.map((color) => (
              <Tag key={`p_p_${color}`} type="primary" color={color}>
                {color}
              </Tag>
            ))}
          </TagGroup>

          <h4>custom colors</h4>

          <TagGroup>
            {customColos.map((color) => (
              <Tag key={`c_${color}`} color={color}>
                {color}
              </Tag>
            ))}
          </TagGroup>
        </div>
        <div>
          <p>可选中标签</p>
          <p>primary</p>
          <TagGroup>
            <SelectableTag checked={true} disabled={true} type="primary">test</SelectableTag>
            <SelectableTag checked={false} disabled={true} type="primary">test</SelectableTag>
            <SelectableTag   type="primary">test</SelectableTag>
            <SelectableTag   type="primary">test</SelectableTag>
          </TagGroup>
          <p>default</p>
          <TagGroup>
            <SelectableTag checked={true} disabled={true}>test</SelectableTag>
            <SelectableTag checked={false} disabled={true}>test</SelectableTag>
            <SelectableTag  disabled={false}>test</SelectableTag>
            <SelectableTag  disabled={false}>test</SelectableTag>
          </TagGroup>
        </div>
      </div>
    </div>
  );
});