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',
];
class Demo extends React.Component {
    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) => (React.createElement(SelectableTag, Object.assign({ key: name, checked: value.indexOf(name) > -1, disabled: i > 2, onChange: this.handleChange.bind(this, name) }, props, { size: 'large' }), name)));
    }
    renderTagList2(props) {
        const { value } = this.state;
        return dataSource.map((name, i) => (React.createElement(SelectableTag, Object.assign({}, props, { theme: 'grey', key: name, checked: value.indexOf(name) > -1, disabled: i > 2, onChange: this.handleChange.bind(this, name), size: 'xs' }), name)));
    }
    renderTagListSingle(props) {
        const { singleValue } = this.state;
        return dataSource.map((name, i) => (React.createElement(SelectableTag, Object.assign({ key: name, checked: singleValue === name, disabled: i > 2, onChange: this.handleChangeSingle.bind(this, name) }, props, { size: 'xs' }), name)));
    }
    render() {
        return (React.createElement("div", { className: "tag-list" },
            React.createElement("h4", null, "\u591A\u9009"),
            React.createElement(TagGroup, null, this.renderTagList({ type: 'normal' })),
            React.createElement(TagGroup, null, this.renderTagList({ type: 'primary' })),
            React.createElement("div", { style: { background: '#f3f3f3', padding: '10px' } },
                React.createElement(TagGroup, null, this.renderTagList2({ type: 'normal' })),
                React.createElement(TagGroup, null, this.renderTagList2({ type: 'primary' }))),
            React.createElement("h4", null, "\u53D7\u63A7&\u5355\u9009"),
            React.createElement(TagGroup, null, this.renderTagListSingle({ type: 'primary' })),
            "CloseableTag"));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('tag-demo-5'));
