import React from 'react';
import ReactDOM from 'react-dom';
import Tag from '..';
const { Group: TagGroup, Selectable: SelectableTag } = Tag;
const dataSource = [
  'tag 1',
  'tag 2',
  'tag 3',
  'disabled',
  'disabled & checked',
];
interface PageStates {
  value: Array<string>;
  singleValue: string;
}
class Demo extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);
    this.state = {
      value: [ 'tag 1', 'disabled & checked' ],
      singleValue: 'tag 2',
    };
  }
  handleChange(name, checked) {
    const { value } = this.state;
    const next = checked ? [ ...value, name ] : value.filter(n => n !== name);

    this.setState({ value: next });
  }

  handleChangeSingle(name, checked) {
    const { singleValue } = this.state; //eslint-disable-line
    const next = checked ? name : '';

    this.setState({ singleValue: next });
  }

  renderTagList(props) {
    const { value } = this.state;

    return dataSource.map((name, i) => (
      <SelectableTag
        key={name}
        checked={value.indexOf(name) > -1}
        disabled={i > 2}
        onChange={this.handleChange.bind(this, name)}
        {...props}
        size='large'
      >
        {name}
      </SelectableTag>
    ));
  }
  renderTagList2(props) {
    const { value } = this.state;

    return dataSource.map((name, i) => (
      <SelectableTag
        {...props}
        theme='grey'
        key={name}
        checked={value.indexOf(name) > -1}
        disabled={i > 2}
        onChange={this.handleChange.bind(this, name)}
        size='xs'
      >
        {name}
      </SelectableTag>
    ));
  }

  renderTagListSingle(props) {
    const { singleValue } = this.state;

    return dataSource.map((name, i) => (
      <SelectableTag
        key={name}
        checked={singleValue === name}
        disabled={i > 2}
        onChange={this.handleChangeSingle.bind(this, name)}
        {...props}
        size='xs'
      >
        {name}
      </SelectableTag>
    ));
  }

  render() {
    return (
      <div className="tag-list">
        <h4>多选</h4>
        <TagGroup>{this.renderTagList({ type: 'normal' })}</TagGroup>
        <TagGroup>{this.renderTagList({ type: 'primary' })}</TagGroup>
        <div style={{ background: '#f3f3f3', padding: '10px' }}>
          <TagGroup>{this.renderTagList2({ type: 'normal' })}</TagGroup>
          <TagGroup>{this.renderTagList2({ type: 'primary' })}</TagGroup>
        </div>

        <h4>受控&单选</h4>
        <TagGroup>{this.renderTagListSingle({ type: 'primary' })}</TagGroup>
        CloseableTag
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('tag-demo-5'));