import _extends from "@babel/runtime/helpers/extends";
// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
import React, { cloneElement, Children, isValidElement, useRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { safeInvoke, createFocusManager } from '../utils';

/**
 * `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 = useRef();
  const {
    focusNext,
    focusPrev,
    focusFirst,
    focusLast
  } = useMemo(() => 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;
    }

    safeInvoke(onKeyDown, e);
  };

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

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

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

    return child;
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    className: classNames(baseClassName, className)
  }, props, {
    onKeyDown: handleKeyDown,
    ref: rootRef
  }), items);
};

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

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * @ignore
   */
  baseClassName: PropTypes.string,

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

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

SubnavItem.propTypes = {
  /**
   * Is item active.
   */
  active: PropTypes.bool,

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

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * @ignore
   */
  baseClassName: PropTypes.string
};
SubnavItem.defaultProps = {
  className: null,
  baseClassName: "".concat(CLS_PREFIX, "subnav__item")
};
export default Subnav;
export { SubnavItem };