import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
//  strict
import React from 'react';
import styled from 'styled-components';
import injectE2E from '../../Tools/injectE2E';

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

var Wrapper =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1rjvnx3-0"
})(["\n  display: flex;\n"]);
var RadioButton =
/*#__PURE__*/
styled.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__*/
styled.input.attrs({
  'data-e2e': injectE2E,
  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;
});
export var RadioLabel =
/*#__PURE__*/
styled.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;
});

var Radio = function Radio(_ref5) {
  var input = _ref5.input,
      rest = _objectWithoutProperties(_ref5, ["input"]);

  return React.createElement(Wrapper, null, React.createElement(Input, _extends({}, input, rest)), React.createElement(RadioLabel, {
    name: rest.name,
    value: rest.value
  }, React.createElement(RadioButton, null), rest.label));
};

export default Radio;