import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Link } from 'react-router';
import { Icon } from './Icon';
import { KeyDownable } from './KeyDownable';
/*
 * TODO refactor
 * Refactoring strategy:
 * 1) Remove all router usage, if developer want to navigate with this menu - he should make it on his own.
 * 2) Remove window.scroll usage, each page should control page scroll position by itself
 * 3) Remove children usage - it's incorrect and react shows errors about it
 * 4) Rename sub prop to something else (like compact)
 * 5) Move 'isActive' flag outside each item to root prop (like in tabs)
 * 6) a11y - add ariaLabel for each menu config for correct navigation
 */

var CLASS_NAME_MENU = 'rc-menu';
var FORCE_UPDATE_TIMEOUT = 300;
export var Menu =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Menu, _React$PureComponent);

  function Menu() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "routerListener", null);

    _defineProperty(_assertThisInitialized(_this), "isItemSelected", function (menuItem) {
      var router = _this.context.router;

      if (menuItem.link && router && router.isActive(menuItem.link)) {
        return true;
      }

      if (menuItem.isActive) {
        return true;
      }

      if (Array.isArray(menuItem.children)) {
        return menuItem.children.some(_this.isItemSelected);
      }

      return false;
    });

    _defineProperty(_assertThisInitialized(_this), "handleLinkClick", function () {
      window.scrollTo(0, 0);
    });

    _defineProperty(_assertThisInitialized(_this), "renderRootMenuItem", function (menuItem, index) {
      return _this.renderMenuItem(menuItem, index);
    });

    _defineProperty(_assertThisInitialized(_this), "renderNestedMenuItem", function (menuItem, index) {
      return _this.renderMenuItem(menuItem, index, true);
    });

    return _this;
  }

  var _proto = Menu.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var router = this.context.router;

    if (router) {
      this.routerListener = router.listen(function () {
        // TODO refactor this weird shit
        setTimeout(function () {
          _this2.forceUpdate();
        }, FORCE_UPDATE_TIMEOUT);
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.routerListener) {
      this.routerListener();
    }
  };

  _proto.renderMenuItem = function renderMenuItem(menuItem, index, nested) {
    var _this3 = this;

    if (nested === void 0) {
      nested = false;
    }

    var sub = this.props.sub;
    var name = menuItem.name,
        link = menuItem.link,
        testAutomationId = menuItem.testAutomationId,
        id = menuItem.id,
        children = menuItem.children,
        onClickHandler = menuItem.onClickHandler;
    var iconNode = this.renderIcon(menuItem.icon);
    var isCurrentMenuItem = this.isItemSelected(menuItem);
    var classNames = classnames('rc-menu__item', menuItem.className, {
      'rc-menu__item_with-icon': menuItem.icon,
      'rc-menu__item_nested': nested,
      'rc-menu__item_sub': sub,
      'rc-menu__item_active': isCurrentMenuItem,
      // TODO this class was returned for back compatibility with
      active: isCurrentMenuItem
    });
    var content;

    if (!onClickHandler) {
      content = React.createElement(Link, {
        to: link,
        className: classNames,
        "data-test-automation-id": "item",
        role: "menuitem",
        onClick: this.handleLinkClick
      }, iconNode, name, isCurrentMenuItem && React.createElement("span", {
        className: "sr-only"
      }, ", ", this.props.currentLabel));
    } else {
      content = React.createElement(KeyDownable, {
        onClick: function onClick(event) {
          window.scrollTo(0, 0);
          onClickHandler(event); // TODO refactor this weird shit

          setTimeout(function () {
            _this3.forceUpdate();
          }, FORCE_UPDATE_TIMEOUT);
        }
      }, function (keyDownProps) {
        return React.createElement("button", _extends({}, keyDownProps, {
          href: "javascript:;",
          className: classNames,
          "data-test-automation-id": "item",
          role: "menuitem"
        }), iconNode, name, isCurrentMenuItem && React.createElement("span", {
          className: "sr-only"
        }, ", ", _this3.props.currentLabel));
      });
    }

    return React.createElement("li", {
      className: "rc-menu__item-wrapper",
      key: index,
      id: id,
      "data-test-automation-id": testAutomationId,
      role: "none"
    }, content, this.renderChildren(children, isCurrentMenuItem));
  };

  _proto.renderIcon = function renderIcon(iconName) {
    if (!iconName) {
      return null;
    }

    var sub = this.props.sub;
    var className = classnames('rc-menu__icon', {
      'rc-menu__icon_sub': sub
    });
    return React.createElement(Icon, {
      name: iconName,
      className: className,
      "aria-hidden": "true"
    });
  };

  _proto.renderChildren = function renderChildren(items, isParentActive) {
    if (!items || !isParentActive) {
      return null;
    }

    var className = classnames(CLASS_NAME_MENU, 'rc-menu_nested');
    return React.createElement("ul", {
      className: className
    }, items.map(this.renderNestedMenuItem));
  };

  _proto.render = function render() {
    var _this$props = this.props,
        ariaLabel = _this$props.ariaLabel,
        sub = _this$props.sub,
        children = _this$props.children,
        config = _this$props.config;
    var className = classnames(CLASS_NAME_MENU, this.props.className, {
      'rc-menu_submenu': sub
    });
    var menuItems = config || children;
    return React.createElement("nav", {
      "aria-label": ariaLabel
    }, React.createElement("ul", {
      className: className,
      role: "menubar",
      "aria-label": ariaLabel,
      "data-test-automation-id": this.props.testAutomationId
    }, menuItems.map(this.renderRootMenuItem)));
  };

  return Menu;
}(React.PureComponent);

_defineProperty(Menu, "contextTypes", {
  router: PropTypes.object
});

_defineProperty(Menu, "propTypes", {
  config: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string,
    link: PropTypes.string,
    children: PropTypes.array,
    onClickHandler: PropTypes.func,
    testAutomationId: PropTypes.string
  })),
  children: PropTypes.node,
  className: PropTypes.string,
  sub: PropTypes.bool,
  testAutomationId: PropTypes.string,
  ariaLabel: PropTypes.string,
  currentLabel: PropTypes.string
});

_defineProperty(Menu, "defaultProps", {
  children: [],
  testAutomationId: null,
  className: null,
  config: null,
  sub: false,
  ariaLabel: 'TRANSLATE:SIDE_BAR_MENU_ARIA_LABEL',
  currentLabel: 'TRANSLATE:CURRENT'
});