"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tab = void 0;
var _react = _interopRequireDefault(require("react"));
var _tooltip = require("../tooltip");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Tab = ({
  option,
  onChange = () => {},
  groupIdentifier = '',
  checked = false
}) => {
  const {
    key,
    testId,
    label,
    labelClassName = '',
    inputClassName = 'tabgroup-tab',
    isDisabled,
    tooltip,
    icon
  } = option;
  const itemId = [groupIdentifier, option.key].filter(Boolean).join('-');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      type: "radio",
      className: inputClassName,
      id: itemId,
      tabIndex: checked ? 0 : -1 // only the selected tab should be focusable (not the first/last one when moving with the keyboard)
      ,
      checked: checked,
      value: key,
      onChange: () => onChange(option),
      disabled: isDisabled,
      "test-id": testId
    }, key), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
      content: tooltip,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
        htmlFor: itemId,
        className: labelClassName,
        "test-id": `${testId}-label`,
        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          className: "tabgroup-icon",
          icon: icon
        }), label]
      }, "tabgroup-label")
    })]
  });
};
exports.Tab = Tab;