import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import enhanceWithClickOutside from 'react-click-outside';
import HeroButtonListItem from './HeroButtonList.Item';
import HeroButton from './HeroButton';
import Collapsible from './Collapsible';
import styles from './HeroButton.styl';

class HeroButtonList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.toggleOpen = this.toggleOpen.bind(this);
  }

  toggleOpen() {
    this.setState(({ open }) => ({ open: !open }));
  }

  handleClickOutside() {
    this.setState({ open: false });
  }

  render() {
    const { label, icon, disabled, children } = this.props;
    const { open } = this.state;

    const classes = classNames({
      [styles.dropdown]: true,
      [styles.open]: open
    });

    return (
      <div>
        <HeroButton
          icon={icon}
          disabled={disabled}
          onClick={this.toggleOpen}
        >
          {label}
          <div className={styles.mode}>
            <Collapsible.Icon open={open} />
          </div>
        </HeroButton>
        <Collapsible open={open} className={classes}>
          <ul>{children}</ul>
        </Collapsible>
      </div>
    );
  }
}

HeroButton.propTypes = {
  children: PropTypes.node,
  label: PropTypes.string,
  icon: PropTypes.string,
  disabled: PropTypes.bool
};

const EnhancedHeroButtonList = enhanceWithClickOutside(HeroButtonList);

export default EnhancedHeroButtonList;

EnhancedHeroButtonList.Item = HeroButtonListItem;