import React, { Component } from 'react';
import { IconFont } from 'rsuite';
import Tag, { TagGroup } from '../src';

export default class TagUncontroledGroupDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: Object.keys(Tag.Color)
    };
  }

  getColors = (color) => {
    const colors = Object.keys(Tag.Color);
    return colors.indexOf(color) > -1 ? color : Tag.Color.default;
  };

  getTags = color => (
    <Tag
      key={color}
      color={this.getColors(color)}
      closable={true}
      afterClose={() => {
        this.handleAfterClose(color);
      }}
    >
      <IconFont icon="bookmark" />{` ${color} 标签`}
    </Tag>
  );

  handleAfterClose = (removeColor) => {
    let { tags } = this.state;
    tags = tags.filter(color => color !== removeColor);
    this.setState({
      tags
    });
  };

  handleCreateInputConfirm = (tag) => {
    const state = this.state;
    let tags = state.tags;
    if (tag && tags.indexOf(tag) === -1) {
      tags = [...tags, tag];
    }
    this.setState({
      tags
    });
  };

  render() {
    return (
      <div>
        <TagGroup onCreateInputConfirm={this.handleCreateInputConfirm}>
          {this.state.tags.map(this.getTags)}
        </TagGroup>
      </div>
    );
  }
}
