"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SubnavItem = exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _constants = require("../../constants");

var _utils = require("../utils");

// Copyright 1999-2020. Plesk International GmbH. All rights reserved.

/**
 * `Subnav` component is used when you need a second level navigation under [Tabs](#!/Tabs) on the screen.
 * @since 0.0.42
 */
const Subnav = ({
  baseClassName,
  className,
  children,
  onKeyDown,
  ...props
}) => {
  const rootRef = (0, _react.useRef)();
  const {
    focusNext,
    focusPrev,
    focusFirst,
    focusLast
  } = (0, _react.useMemo)(() => (0, _utils.createFocusManager)(rootRef), []);

  const handleKeyDown = e => {
    switch (e.key) {
      case 'ArrowLeft':
        e.preventDefault();
        focusPrev();
        break;

      case 'ArrowRight':
        e.preventDefault();
        focusNext();
        break;

      case 'Home':
      case 'PageUp':
        e.preventDefault();
        focusFirst();
        break;

      case 'End':
      case 'PageDown':
        e.preventDefault();
        focusLast();
        break;

      case 'Enter':
        e.preventDefault();
        e.target.click();
        break;
    }

    (0, _utils.safeInvoke)(onKeyDown, e);
  };

  let itemIndex = -1;

  _react.Children.toArray(children).every((child, index) => {
    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
      return true;
    }

    if (child.props.active) {
      itemIndex = index;
      return false;
    } else if (itemIndex === -1) {
      itemIndex = index;
    }

    return true;
  });

  const items = _react.Children.map(children, (child, index) => {
    if (itemIndex === index) {
      return /*#__PURE__*/(0, _react.cloneElement)(child, {
        tabIndex: 0
      });
    }

    return child;
  });

  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames.default)(baseClassName, className)
  }, props, {
    onKeyDown: handleKeyDown,
    ref: rootRef
  }), items);
};

Subnav.propTypes = {
  /**
   * Subnav items
   * @since 0.0.42
   */
  children: _propTypes.default.node,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string,

  /**
   * @ignore
   */
  onKeyDown: _propTypes.default.string
};
Subnav.defaultProps = {
  children: null,
  className: null,
  baseClassName: "".concat(_constants.CLS_PREFIX, "subnav"),
  onKeyDown: undefined
};
/**
 * SubnavItem component.
 */

const SubnavItem = ({
  baseClassName,
  className,
  active,
  children,
  ...props
}) => /*#__PURE__*/(0, _react.cloneElement)(children, {
  className: (0, _classnames.default)(baseClassName, active && "".concat(baseClassName, "--active"), className),
  tabIndex: -1,
  ...props
});

exports.SubnavItem = SubnavItem;
SubnavItem.propTypes = {
  /**
   * Is item active.
   */
  active: _propTypes.default.bool,

  /**
   * Content of the item
   */
  children: _propTypes.default.element.isRequired,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string
};
SubnavItem.defaultProps = {
  className: null,
  baseClassName: "".concat(_constants.CLS_PREFIX, "subnav__item")
};
var _default = Subnav;
exports.default = _default;