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

const { Item } = SplitButton;
const menu = [ 'Undo', 'Redo', 'Cut', 'Copy', 'Paste' ].map(item => (
  <Item key={item}>{item}</Item>
));

interface IState {
  visible: boolean;
  label: string;
}

class CompositeSplitButton extends React.Component<{}, IState> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      label: 'Choose Action',
    };
  }

  onSelect = val => {
    this.setState({
      visible: false,
      label: val,
    });
  };

  changeVisible = visible => {
    this.setState({
      visible,
    });
  };

  render() {
    const { visible, label } = this.state;
    return (
      <SplitButton
        label={label}
        visible={visible}
        onVisibleChange={this.changeVisible}
        onItemClick={this.onSelect}
        type="secondary"
      >
        {menu}
      </SplitButton>
    );
  }
}

ReactDOM.render(<CompositeSplitButton />, document.getElementById('split-button-demo-3'));