import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled, { css } from 'styled-components';
export var TabRadio = (_ref) => {
  var {
    options = [],
    tabStyle = 'button',
    name,
    value,
    onChange,
    tabClassName
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, null, options.map((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 = () => 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.createElement("div", {
      className: tabClassName || defaultClassName,
      key: "Tab--" + index
    }, /*#__PURE__*/React.createElement(Tab, {
      tabStyle: tabStyle,
      isDisabled: option.disabled,
      isChecked: isChecked,
      onClick: onClick
    }, option.icon || option.label, /*#__PURE__*/React.createElement("input", {
      className: "d-none",
      type: "radio",
      name: name,
      checked: isChecked
    }), /*#__PURE__*/React.createElement(Check, {
      isChecked: isChecked
    })));
  }));
};
var Container = styled.div.attrs({
  className: 'row g-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Tab = styled.div.attrs({
  className: 'p-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), props => props.isChecked ? props.theme.palette.primary : props.theme.palette.hint, props => props.isChecked ? 'default' : 'pointer', props => props.isChecked || props.isDisabled ? 'none' : 'all', props => props.isChecked ? '1' : '0.6', props => !props.isChecked && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border: 0.1rem solid ", ";\n        color: ", ";\n\n        & svg,\n        & img {\n          opacity: 0.9;\n        }\n      }\n    "])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
}));
var Check = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, props => props.isChecked ? props.theme.palette.primary : 'transparent');
//# sourceMappingURL=index.js.map