"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.RadioLabel = void 0;

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

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

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

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

var _injectE2E = _interopRequireDefault(require("../../Tools/injectE2E"));

//  strict
var toId = function toId(value) {
  return "".concat(value, "-radio");
};

var Wrapper =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "sc-1rjvnx3-0"
})(["\n  display: flex;\n"]);

var RadioButton =
/*#__PURE__*/
_styledComponents.default.span.withConfig({
  componentId: "sc-1rjvnx3-1"
})(["\n  margin-right: 0.5rem;\n  background: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 0.75rem;\n  width: 0.75rem;\n"], function (_ref) {
  var theme = _ref.theme;
  return theme.palette.white;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.inputRadioColor;
});

var Input =
/*#__PURE__*/
_styledComponents.default.input.attrs({
  'data-e2e': _injectE2E.default,
  id: function id(props) {
    return toId(props.value);
  },
  name: function name(props) {
    return props.name;
  },
  type: 'radio'
}).withConfig({
  componentId: "sc-1rjvnx3-2"
})(["\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n\n  &:checked ~ label ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-color: ", ";\n\n    &::before {\n      border-radius: 51%;\n      content: '';\n      display: inline-block;\n      height: 0.25rem;\n      width: 0.25rem;\n      position: relative;\n      background: ", ";\n    }\n  }\n"], RadioButton, function (_ref3) {
  var theme = _ref3.theme;
  return theme.inputRadioCheckedColor;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.inputRadioCheckedColor;
});

var RadioLabel =
/*#__PURE__*/
_styledComponents.default.label.attrs({
  htmlFor: function htmlFor(props) {
    return toId(props.value);
  }
}).withConfig({
  componentId: "sc-1rjvnx3-3"
})(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 1rem;\n  padding-left: 0.5rem;\n  cursor: pointer;\n  font-family: ", ";\n  font-size: 1rem;\n"], function (props) {
  return props.theme.fontPrimary;
});

exports.RadioLabel = RadioLabel;

var Radio = function Radio(_ref5) {
  var input = _ref5.input,
      rest = (0, _objectWithoutProperties2.default)(_ref5, ["input"]);
  return _react.default.createElement(Wrapper, null, _react.default.createElement(Input, (0, _extends2.default)({}, input, rest)), _react.default.createElement(RadioLabel, {
    name: rest.name,
    value: rest.value
  }, _react.default.createElement(RadioButton, null), rest.label));
};

var _default = Radio;
exports.default = _default;