import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["value", "label", "icon", "variant", "disabled", "dotColor", "className"];
import React from "react";
import PropTypes from "prop-types";
import { Trigger as TabTrigger } from "@radix-ui/react-tabs";
import cx from "classnames";
import createComponent from "../../system/createComponent";
import useMediaQuery from "../../styles/useMediaQuery";
import { mediaBreakpointDownSm } from "../../styles/breakpoints";
import { getColorsLabels } from "../../styles/colors";
import styled from "../../styles/styled";
import getClasses from "./styles";
var colorList = getColorsLabels(true);

function Tab(props) {
  var value = props.value,
      label = props.label,
      icon = props.icon,
      variant = props.variant,
      disabled = props.disabled,
      dotColor = props.dotColor,
      className = props.className,
      restProps = _objectWithoutProperties(props, _excluded);

  var classes = getClasses();
  var classNames = cx(_defineProperty({}, classes.standardButton, variant === "standard"), _defineProperty({}, classes.captionButton, variant === "caption"), className);
  var isMobile = useMediaQuery("(max-width: ".concat(mediaBreakpointDownSm, ")"));
  var showLabel = variant === "caption" || !isMobile;
  return /*#__PURE__*/React.createElement(TabTrigger, _extends({
    value: value,
    disabled: disabled,
    className: classNames
  }, restProps), icon, showLabel && label, !disabled && dotColor && /*#__PURE__*/React.createElement(Dot, {
    color: dotColor
  }));
}

var Dot = styled.span(function (_ref) {
  var color = _ref.color,
      theme = _ref.theme;
  return {
    position: "absolute",
    top: 0,
    right: 0,
    width: theme.spaces.sm,
    height: theme.spaces.sm,
    borderRadius: "100%",
    backgroundColor: theme.colors[color][500]
  };
});
Tab.propTypes = {
  className: PropTypes.string,
  value: PropTypes.string.isRequired,
  label: PropTypes.string,
  icon: PropTypes.element,
  variant: PropTypes.oneOf(["standard", "caption"]),
  disabled: PropTypes.bool,
  dotColor: PropTypes.oneOf(colorList),
  sx: PropTypes.object
};
Tab.defaultProps = {
  variant: "standard",
  disabled: false
};
export default createComponent(Tab);