import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
//  strict
import PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
import injectE2E from '../../Tools/injectE2E';
import { screenSize, theme } from '../../Tools/interpolation';
var Wrapper =
/*#__PURE__*/
styled.div.attrs(injectE2E).withConfig({
  componentId: "sc-5kcyjn-0"
})(["\n  position: relative;\n  flex: 1 auto;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 1rem;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  @media (max-width: ", ") {\n    order: 1;\n\n    &.hidden {\n      order: 2;\n    }\n  }\n\n  @media (min-width: ", ") {\n    display: flex;\n    justify-content: center;\n    order: 1;\n\n    &:hover {\n      & :last-child {\n        opacity: 1;\n      }\n    }\n  }\n"], screenSize('sm'), screenSize('sm'));
var Bar =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-5kcyjn-1"
})(["\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  width: 100%;\n  height: 0.2rem;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  background-color: ", ";\n  opacity: ", ";\n"], theme('tabMenuBarColor'), function (props) {
  return props.selected === true ? '1' : '0';
});

var TabMenuItem = function TabMenuItem(_ref) {
  var children = _ref.children,
      className = _ref.className,
      selected = _ref.selected,
      rest = _objectWithoutProperties(_ref, ["children", "className", "selected"]);

  return React.createElement(Wrapper, _extends({
    className: selected === true ? className : "".concat(className || '', " disabled")
  }, rest), children, React.createElement(Bar, {
    selected: selected
  }));
};

TabMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node,
  className: PropTypes.string,
  e2e: PropTypes.string,
  selected: PropTypes.bool
} : {};
TabMenuItem.defaultProps = {
  e2e: 'defaultTabMenuItem',
  selected: false
};
export default TabMenuItem;