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

const { Group: TagGroup, Closeable: CloseableTag } = Tag;
class Demo extends React.Component {
  renderCloseAreaTags() {
    return [ 'tag', 'tail' ].reduce(
      (prev, curr) =>
        prev.concat([
          <h4 key={`tag-title-${curr}`}>点击{curr} 关闭</h4>,
          <CloseableTag
            size="large"
            key={`tag-${curr}-1`}
            closeArea={curr as 'tag' | 'tail'}
          >
            closeArea: {curr}
          </CloseableTag>,
          <CloseableTag
            size="medium"
            key={`tag-${curr}-2`}
            type="primary"
            closeArea={curr as 'tag' | 'tail'}
          >
            closeArea: {curr}
          </CloseableTag>,
          <CloseableTag
            size="small"
            key={`tag-${curr}-2`}
            type="primary"
            closeArea={curr as 'tag' | 'tail'}
          >
            closeArea: {curr}
          </CloseableTag>,
          <CloseableTag
            size="xs"
            key={`tag-${curr}-2`}
            type="primary"
            closeArea={curr as 'tag' | 'tail'}
          >
          closeArea: {curr}
          </CloseableTag>,

        ]),
      [],
    );
  }
  render() {
    return (
      <div className="tag-list">
        <TagGroup>{this.renderCloseAreaTags()}</TagGroup>
        <h4>close handler</h4>
        <TagGroup>
          <CloseableTag
            // @ts-ignore
            disabled
            size='large'
            onClose={(val: string) => {
              console.log('可关闭', val);
              return true;
            }}
          >
            close
          </CloseableTag>
          <CloseableTag
            size='medium'
            onClose={() => {
              console.log('禁用关闭');
              return false;
            }}
          >
            {' '}
            prevent close{' '}
          </CloseableTag>
          <CloseableTag size='small' afterClose={() => console.log('关闭后回调')}>
            after Close
          </CloseableTag>
          <CloseableTag size='xs' afterClose={() => console.log('关闭后回调')}>
            after Close
          </CloseableTag>
        </TagGroup>
        <div style={{ background: '#f3f3f3', padding: '10px' }}>
          <TagGroup>
            <CloseableTag
            // @ts-ignore
              disabled
              size='large'
              theme='grey'
              onClose={(val: string) => {
                console.log('可关闭', val);
                return true;
              }}
            >
            close
            </CloseableTag>
            <CloseableTag
              size='medium'
              theme='grey'
              onClose={() => {
                console.log('禁用关闭');
                return false;
              }}
            >
              {' '}
            prevent close{' '}
            </CloseableTag>
            <CloseableTag size='small' theme='grey' afterClose={() => console.log('关闭后回调')}>
            after Close
            </CloseableTag>
            <CloseableTag size='xs' theme='grey' afterClose={() => console.log('关闭后回调')}>
            after Close
            </CloseableTag>
          </TagGroup>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('tag-demo-6'));