"use strict";

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

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

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

var _randomstring = _interopRequireDefault(require("randomstring"));

var _typography = require("../../../mixins/typography");

var _branding = require("../../../mixins/branding");

var _primitives = require("../../../primitives");

var _radioOption = require("../../icon/radio-option");

var _focus = require("../../../mixins/focus");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var RadioButtonContainer = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "RadioButtonContainer",
  componentId: "rvgfvp-0"
})(["cursor:pointer;position:relative;", " &:focus-within{box-shadow:", ",", " ", ";}border-radius:", ";"], (0, _focus.getBaseFocusState)({
  hoverTransition: false,
  activeTransition: false
}), _focus.focusedBoxShadow, _focus.focusedBorderShadow, _focus.focusedBorderColor, _focus.focusedBorderRadius);
var StyledRadioOption = (0, _styledComponents["default"])(_radioOption.RadioOption).withConfig({
  displayName: "StyledRadioOption",
  componentId: "rvgfvp-1"
})(["margin-left:-", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.spacing.s1;
});

var Label = _styledComponents["default"].label.withConfig({
  displayName: "Label",
  componentId: "rvgfvp-2"
})(["color:", ";cursor:pointer;font-size:", ";font-family:", ";display:flex;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:9px;margin-bottom:11px;z-index:-1;"], (0, _branding.getPaletteColor)('greyscale-black'), _typography.getFontSize, _typography.getFontFamily);

var InvisibleInput = _styledComponents["default"].input.withConfig({
  displayName: "InvisibleInput",
  componentId: "rvgfvp-3"
})(["height:0;width:0;margin:0;padding:0;opacity:0;"]);

var Wrapper = _styledComponents["default"].div.withConfig({
  displayName: "Wrapper",
  componentId: "rvgfvp-4"
})(["transform:scale(1);"]);

var RadioButton = function RadioButton(_ref2) {
  var id = _ref2.id,
      text = _ref2.text,
      selected = _ref2.selected,
      onClick = _ref2.onClick,
      name = _ref2.name;

  var onClickWithEvent = function onClickWithEvent(_e) {
    return onClick(id);
  };

  var randomIdentifier = "".concat(_randomstring["default"].generate({
    length: 5,
    charset: 'alphabetic'
  }), "-").concat(id);
  var label = text != null ? _react["default"].createElement(Label, {
    face: "sans",
    fontSize: "f1",
    htmlFor: randomIdentifier
  }, text) : null;
  return _react["default"].createElement(Wrapper, null, _react["default"].createElement(RadioButtonContainer, {
    stacked: "row",
    align: "center",
    onClick: onClickWithEvent
  }, _react["default"].createElement(InvisibleInput, {
    id: randomIdentifier,
    readOnly: true,
    type: "radio",
    checked: selected,
    name: name
  }), _react["default"].createElement(StyledRadioOption, {
    checked: selected
  }), label));
};

exports.RadioButton = RadioButton;
RadioButton.displayName = 'RadioButton';