import React, { Component } from 'react';
import './uk-product-context-menu.scss';
import Icon from '../Icon';

const ContextMenuButton = (props) => (
  <div className="uk-product-context-menu__toggle-trigger" role="button" {...props}>
    <Icon type="expand"/>
  </div>
);

const ContextMenuOption = ({ onActionClick, icon, label }) => (
  <li
    onClick={(event) => {
      event.preventDefault();
      onActionClick();
    }}
    className="uk-product-context-menu__action">
    <Icon type={icon}/>
    <span>{label}</span>
  </li>
);

class ContextMenu extends Component {

  constructor(props) {
    super(props);

    this.state = {
      showActions: false,
    }

    this.show = this.show.bind(this);
    this.hide = this.hide.bind(this);
  }

  show(event) {

    if (event) {
      event.preventDefault();
    }

    this.setState({
      showActions: true
    }, () => {
      document.addEventListener('click', this.hide);
    });

  }

  hide(event) {

    if (event) {
      event.preventDefault();
    }

    this.setState({
      showActions: false
    }, () => {
      document.removeEventListener('click', this.hide);
    });

  }

  render() {

    const {
      actions,
    } = this.props;

    const {
      showActions,
    } = this.state;

    return (
      <div className="uk-product-context-menu">
        <ContextMenuButton onClick={showActions ? this.hide : this.show} />

        {
          showActions && (

            <div className="uk-product-context-menu__actions" >
              {
                actions.map((action, i) => (
                  <ContextMenuOption
                    key={i}
                    {...action} />
                ))
              }
            </div>

          )
        }
      </div>
    );

  }
}

export default ContextMenu;