var _excluded = ["baseBadgeSize"],
  _excluded2 = ["badgeSize", "onClick"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from 'react';
import styled from 'styled-components';
import { BaseBadge } from '..';
import Typography from '../../../../Atoms/Typography';
import Button from '../../../Button';
import { TooltipBadgeSize } from './TooltipBadge.constants';
var StyledTypography = styled(Typography).withConfig({
  displayName: "TooltipBadge__StyledTypography",
  componentId: "sc-q66su9-0"
})(["font-weight:800;cursor:default;"]);
var StyledBaseBadge = styled(BaseBadge).withConfig({
  displayName: "TooltipBadge__StyledBaseBadge",
  componentId: "sc-q66su9-1"
})(["background-color:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.colorTokens.neutral.background_strong;
});
var StyledButton = styled(Button).withConfig({
  displayName: "TooltipBadge__StyledButton",
  componentId: "sc-q66su9-2"
})(["", ""], function (_ref2) {
  var theme = _ref2.theme;
  return "\n    :hover {\n      cursor: pointer;\n      ".concat(StyledTypography, " {\n        color: ").concat(theme.colorTokens.action.text_default, ";\n        cursor: pointer;\n      }\n      ").concat(StyledBaseBadge, " {\n        background-color: ").concat(theme.colorTokens.action.background_weak, ";\n      }\n    }\n    :focus {\n      cursor: pointer;\n      ").concat(StyledTypography, " {\n        color: ").concat(theme.colorTokens.neutral.text_default, ";\n        cursor: pointer;\n      }\n      ").concat(StyledBaseBadge, " {\n        border: 2px solid ").concat(theme.colorTokens.action.border_focus, ";\n      }\n    }");
});
var TooltipBadgeContent = React.forwardRef(function (_ref3, ref) {
  var baseBadgeSize = _ref3.baseBadgeSize,
    htmlProps = _objectWithoutProperties(_ref3, _excluded);
  var typographyType = baseBadgeSize === TooltipBadgeSize.s ? 'caption' : 'secondary';
  return React.createElement(React.Fragment, null, React.createElement(StyledBaseBadge, _extends({}, htmlProps, {
    ref: ref,
    badgeColor: function badgeColor(t) {
      return t.colorTokens.neutral.text_default;
    },
    badgeSize: baseBadgeSize,
    symmetricShape: true
  }), React.createElement(StyledTypography, {
    type: typographyType
  }, "?")));
});
export var TooltipBadge = React.forwardRef(function (_ref4, ref) {
  var _ref4$badgeSize = _ref4.badgeSize,
    badgeSize = _ref4$badgeSize === void 0 ? 'l' : _ref4$badgeSize,
    onClick = _ref4.onClick,
    htmlProps = _objectWithoutProperties(_ref4, _excluded2);
  var baseBadgeSize = typeof badgeSize === 'number' ? badgeSize : TooltipBadgeSize[badgeSize];
  return onClick ? React.createElement(StyledButton, {
    variant: "neutral",
    onClick: onClick
  }, React.createElement(TooltipBadgeContent, _extends({}, htmlProps, {
    ref: ref,
    baseBadgeSize: baseBadgeSize
  }))) : React.createElement(TooltipBadgeContent, _extends({}, htmlProps, {
    ref: ref,
    baseBadgeSize: baseBadgeSize
  }));
});