import _pt from "prop-types";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import classnames from 'classnames';
export var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var defaultProps = {
    selected: false
  };
  var href = props.href || "#".concat(props.panelId);
  var classes = classnames('ds-c-tabs__item', props.className);
  var sharedTabProps = {
    role: 'tab',
    className: classes,
    id: props.id,
    ref: ref
  };

  var handleClick = function handleClick(evt) {
    var onClick = props.onClick,
        panelId = props.panelId,
        id = props.id;

    if (onClick) {
      onClick(evt, panelId, id, href);
    }
  };

  var handleKeyDown = function handleKeyDown(evt) {
    var onKeyDown = props.onKeyDown,
        panelId = props.panelId,
        id = props.id;

    if (onKeyDown) {
      onKeyDown(evt, panelId, id, href);
    }
  };

  return !props.disabled ? /*#__PURE__*/React.createElement("a", _extends({
    "aria-selected": props.selected || defaultProps.selected,
    "aria-controls": props.panelId,
    href: href,
    onClick: handleClick,
    onKeyDown: handleKeyDown
  }, sharedTabProps), props.children) : /*#__PURE__*/React.createElement("span", _extends({
    "aria-disabled": "true"
  }, sharedTabProps), props.children);
});
Tab.propTypes = {
  /**
     * Tab label text or HTML.
     */
  children: _pt.node.isRequired,

  /**
     * Additional classes to be added to the root tab element.
     */
  className: _pt.string,

  /**
     * A unique `id`, to be used on the rendered tab element.
     */
  id: _pt.string.isRequired,

  /**
     * Sets the `href` attribute used for the tab. This can be useful if you want
     * to use relative links rather than a URL hash (the default).
     */
  href: _pt.string,

  /**
     * Called when the tab is clicked, with the following arguments:
     * [`SyntheticEvent`](https://facebook.github.io/react/docs/events.html),
     * `panelId`, `id`, `href`
     */
  onClick: _pt.func,

  /**
     * Called when the tab is selected and a keydown event is triggered.
     * Called with the following arguments:
     * [`SyntheticEvent`](https://facebook.github.io/react/docs/events.html),
     * `panelId`, `id`, `href`
     */
  onKeyDown: _pt.func,

  /**
     * The `id` of the associated `TabPanel`. Used for the `aria-controls` attribute.
     */
  panelId: _pt.string.isRequired,
  selected: _pt.bool,
  disabled: _pt.bool
};
Tab.displayName = 'Tab';
export default Tab;