import React from 'react';
import PropTypes from 'prop-types';
// eslint-disable-next-line import/no-unresolved
import './style.css';

var Tabs = function Tabs(_ref) {
  var handleClick = _ref.handleClick,
      tabs = _ref.tabs,
      selectedTab = _ref.selectedTab;

  var isClickFunction = typeof handleClick === 'function';
  var handleAllClick = function handleAllClick(e) {
    var selTab = e.target;
    if (selTab && selTab.scrollIntoView) {
      selTab.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
    }
    // invokes custom function if passed in the component
    if (isClickFunction) {
      handleClick(selTab.name);
    }
  };
  return React.createElement(
    'div',
    { className: 'ma__search--tabs' },
    React.createElement(
      'div',
      { className: 'main-content--two' },
      React.createElement(
        'div',
        { className: 'ma__tabs' },
        tabs.map(function (tab) {
          var value = tab.value,
              label = tab.label,
              ariaLabel = tab.ariaLabel,
              href = tab.href;

          var isSelected = selectedTab === value ? 'is-selected' : '';
          if (isClickFunction) {
            return React.createElement(
              'button',
              {
                key: 'tab_' + value,
                className: 'ma__tabs-item ' + isSelected,
                name: value,
                onClick: function onClick(e) {
                  return handleAllClick(e);
                },
                'aria-label': ariaLabel || value
              },
              label
            );
          }
          return React.createElement(
            'a',
            {
              key: 'tab_' + value,
              href: href,
              className: 'ma__tabs-item ' + isSelected
            },
            label
          );
        })
      )
    )
  );
};

Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
  /* handleClick is a custom callback function that returns the selected tab value.
   * If handleClick is passed in as a function, the tabs will be rendered as buttons, otherwise will be rendered anchor links.
  */
  handleClick: PropTypes.func,
  /* default tab value rendered as selected */
  selectedTab: PropTypes.string,
  tabs: PropTypes.arrayOf(PropTypes.shape({
    /* href is used as anchor link href for the tab if the handleClick is not passed as a function */
    value: PropTypes.string.isRequired,
    /* text rendered for the tab */
    label: PropTypes.string.isRequired,
    /* href is used as anchor link href for the tab if the handleClick is not passed as a function */
    href: PropTypes.string,
    /* arial-label for the tab button if the handleClick is passed as a function */
    ariaLabel: PropTypes.string
  }))
} : {};

export default Tabs;