"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.TabRadio = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var TabRadio = function TabRadio(_ref) {
  var _ref$options = _ref.options,
      options = _ref$options === void 0 ? [] : _ref$options,
      _ref$tabStyle = _ref.tabStyle,
      tabStyle = _ref$tabStyle === void 0 ? 'button' : _ref$tabStyle,
      name = _ref.name,
      value = _ref.value,
      onChange = _ref.onChange,
      tabClassName = _ref.tabClassName;
  return /*#__PURE__*/_react["default"].createElement(Container, null, options.map(function (option, index) {
    var isChecked = value !== undefined && value === option.value || option.isSelected; // full width the last item if the tabs are odd

    var isFullWidth = (index + 1) % 2 > 0 && index + 1 === options.length;

    var handleChange = function handleChange() {
      return onChange == null ? void 0 : onChange(option.value);
    };

    var onClick = option.onClick || handleChange;
    var defaultClassName = isFullWidth ? 'col-12' : 'col-12 col-sm-6';
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: tabClassName || defaultClassName,
      key: "Tab--" + index
    }, /*#__PURE__*/_react["default"].createElement(Tab, {
      tabStyle: tabStyle,
      isDisabled: option.disabled,
      isChecked: isChecked,
      onClick: onClick
    }, option.icon || option.label, /*#__PURE__*/_react["default"].createElement("input", {
      className: "d-none",
      type: "radio",
      name: name,
      checked: isChecked
    }), /*#__PURE__*/_react["default"].createElement(Check, {
      isChecked: isChecked
    })));
  }));
};

exports.TabRadio = TabRadio;

var Container = _styledComponents["default"].div.attrs({
  className: 'row g-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Tab = _styledComponents["default"].div.attrs({
  className: 'p-1'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border: 0.1rem solid rgba(34, 34, 34, 0.2);\n  color: ", ";\n  font-size: 1.6rem;\n  height: 5.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  position: relative;\n\n  pointer-events: ", ";\n\n  & svg,\n  & img {\n    opacity: ", ";\n  }\n\n  & img {\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  ", "\n"])), function (props) {
  return props.isChecked ? props.theme.palette.primary : props.theme.palette.hint;
}, function (props) {
  return props.isChecked ? 'default' : 'pointer';
}, function (props) {
  return props.isChecked || props.isDisabled ? 'none' : 'all';
}, function (props) {
  return props.isChecked ? '1' : '0.6';
}, function (props) {
  return !props.isChecked && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      &:hover {\n        border: 0.1rem solid ", ";\n        color: ", ";\n\n        & svg,\n        & img {\n          opacity: 0.9;\n        }\n      }\n    "])), function (_ref2) {
    var theme = _ref2.theme;
    return theme.palette.hint;
  }, function (_ref3) {
    var theme = _ref3.theme;
    return theme.palette.hint;
  });
});

var Check = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 1.8rem;\n  top: 1.8rem;\n  width: 1.8rem;\n  height: 1.8rem;\n  border: 0.2rem solid ", ";\n  border-radius: 50%;\n\n  &:after {\n    content: '';\n    display: block;\n    width: 0.8rem;\n    height: 0.8rem;\n    border-radius: 50%;\n    background: ", ";\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isChecked ? props.theme.palette.primary : 'transparent';
});
//# sourceMappingURL=index.js.map