"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _omit2 = _interopRequireDefault(require("ramda/src/omit"));
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../../..");
var _utils = require("../../../common/utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var RADIO_SIZE = 5;
var checkIfHasError = function checkIfHasError(error) {
  return (0, _utils.isString)(error) && error !== '';
};
var CleanInput = _react.default.forwardRef(function (props, ref) {
  return _react.default.createElement("input", _extends({
    ref: ref
  }, (0, _omit2.default)(['hasError'], props)));
});
var Circle = _styledComponents.default.div.withConfig({
  displayName: "Radio__Circle",
  componentId: "sc-1qc8m3x-0"
})(["width:", "px;height:", "px;border:1px solid ", ";background-color:", ";position:relative;border-radius:50%;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;"], function (p) {
  return p.theme.spacing.unit(RADIO_SIZE);
}, function (p) {
  return p.theme.spacing.unit(RADIO_SIZE);
}, function (p) {
  return p.theme.colorTokens.neutral.border_default;
}, function (p) {
  return p.theme.colorTokens.neutral.background_default;
});
var Dot = _styledComponents.default.div.withConfig({
  displayName: "Radio__Dot",
  componentId: "sc-1qc8m3x-1"
})(["width:", "px;height:", "px;background-color:transparent;border-radius:50%;"], function (p) {
  return p.theme.spacing.unit(RADIO_SIZE - 2);
}, function (p) {
  return p.theme.spacing.unit(RADIO_SIZE - 2);
});
var StyledFormLabel = (0, _styledComponents.default)(_.FormLabel).withConfig({
  displayName: "Radio__StyledFormLabel",
  componentId: "sc-1qc8m3x-2"
})(["position:relative;&:hover ", "{border-color:", ";}"], Circle, function (p) {
  return p.theme.colorTokens.action.border_default;
});
var Input = (0, _styledComponents.default)(CleanInput).attrs(function () {
  return {
    type: 'radio'
  };
}).withConfig({
  displayName: "Radio__Input",
  componentId: "sc-1qc8m3x-3"
})(["position:absolute;opacity:0;height:0;width:0;cursor:pointer;&:checked + ", "{", "{background-color:", ";}}&[disabled] + ", "{border-color:", ";}&:checked[disabled] + ", "{border-color:", ";", "{background-color:", ";}}", " &:focus + ", "{border-color:", ";box-shadow:0 0 0 2px ", ";}"], Circle, Dot, function (p) {
  return p.theme.colorTokens.action.background_default;
}, Circle, function (p) {
  return p.theme.colorTokens.neutral.border_disabled;
}, Circle, function (p) {
  return p.theme.colorTokens.neutral.border_disabled;
}, Dot, function (p) {
  return p.theme.colorTokens.neutral.background_disabled;
}, function (p) {
  return p.hasError ? "\n    & + ".concat(Circle, " {\n      border-color: ").concat(p.theme.colorTokens.error.border_default, ";\n    }") : '';
}, Circle, function (p) {
  return p.theme.colorTokens.action.border_default;
}, function (p) {
  return p.theme.colorTokens.action.border_focus;
});
var Label = (0, _styledComponents.default)(_.Typography).withConfig({
  displayName: "Radio__Label",
  componentId: "sc-1qc8m3x-4"
})(["padding-left:", "px;white-space:initial;"], function (p) {
  return p.theme.spacing.unit(2);
});
var Radio = function Radio(props) {
  var autoFocus = props.autoFocus,
    checked = props.checked,
    className = props.className,
    defaultChecked = props.defaultChecked,
    disabled = props.disabled,
    error = props.error,
    hasError = props.hasError,
    id = props.id,
    label = props.label,
    name = props.name,
    onBlur = props.onBlur,
    onChange = props.onChange,
    onClick = props.onClick,
    onFocus = props.onFocus,
    onKeyDown = props.onKeyDown,
    onKeyPress = props.onKeyPress,
    onKeyUp = props.onKeyUp,
    required = props.required,
    value = props.value,
    visuallyEmphasiseRequired = props.visuallyEmphasiseRequired,
    width = props.width,
    noRadioCircle = props.noRadioCircle,
    hideLabel = props.hideLabel,
    children = props.children;
  return _react.default.createElement(_.FormField, {
    error: error,
    width: width || 'auto'
  }, _react.default.createElement(StyledFormLabel, {
    className: className
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    alignItems: "center"
  }, _react.default.createElement(Input, {
    autoFocus: autoFocus,
    checked: checked,
    defaultChecked: defaultChecked,
    disabled: disabled,
    hasError: hasError || checkIfHasError(error),
    id: id,
    name: name,
    onBlur: onBlur,
    onChange: onChange,
    onClick: onClick,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    onKeyPress: onKeyPress,
    onKeyUp: onKeyUp,
    required: required,
    value: value
  }), !noRadioCircle && _react.default.createElement(Circle, null, _react.default.createElement(Dot, null)), children || (!hideLabel ? _react.default.createElement(Label, {
    type: "secondary",
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.text;
    }
  }, visuallyEmphasiseRequired ? "".concat(label, " *") : label) : _react.default.createElement(_.VisuallyHidden, null, _react.default.createElement(Label, {
    type: "secondary",
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.text;
    }
  }, visuallyEmphasiseRequired ? "".concat(label, " *") : label))))));
};
var _default = exports.default = Radio;