import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AriaMenuButton, { Wrapper, Button, Menu as ReactMenu } from 'react-aria-menubutton';
import LanguageIcon from '../../visuals/Icon/svg/ic_languages.svg';
import ButtonIcon from '../Button/ButtonIcon';
import ButtonLabel from '../Button/ButtonLabel';
import Icon from '../../visuals/Icon/Icon';

class LanguageMenu extends Component {
  static propTypes = {
    children: PropTypes.any.isRequired,
    items: PropTypes.array.isRequired,
    /** Determines if the menu will use the <nav> html tag. Use if the menu will contain ONLY links */
    navigational: PropTypes.bool,
  };

  static defaultProps = {
    navigational: false,
  };

  handleSelection = selectedValue => {
    const itemSelected = this.props.items.find(item => item.label === selectedValue);
    if (itemSelected && itemSelected.action) {
      itemSelected.action();
    }
  };

  render() {
    const { children, items, navigational } = this.props;
    const ieData = window.navigator.userAgent.indexOf('MSIE ');
    const isIE = ieData > 0 || !!navigator.userAgent.match(/Trident.*rv:11\./);

    return (
      <Wrapper tag={navigational ? 'nav' : 'div'} className="LanguageMenu" onSelection={this.handleSelection}>
        <Button className="Button Button--linkWhite">
          <ButtonIcon
            className={`${isIE ? 'LanguageMenu-buttonIconIE' : 'LanguageMenu-buttonIcon'}`}
            icon={LanguageIcon}
          />
          <ButtonLabel>{children}</ButtonLabel>
        </Button>
        {!!items.length && (
          <ReactMenu className="LanguageMenu-list" tag="ul">
            {items.map(({ label, to, target, icon }) => (
              <li key={label} className="LanguageMenu-itemWrapper">
                <AriaMenuButton.MenuItem
                  className="LanguageMenu-item"
                  tag={to ? 'a' : 'span'}
                  href={to}
                  target={target}
                  text={label}
                  value={label}
                >
                  <div className="LanguageMenu-itemContent">
                    {icon && <Icon icon={icon} />}
                    <span className="LanguageMenu-language">{label}</span>
                  </div>
                </AriaMenuButton.MenuItem>
              </li>
            ))}
          </ReactMenu>
        )}
      </Wrapper>
    );
  }
}

export default LanguageMenu;