import React__default from 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss, a as usePrevious } from './utilities-357c56e6.js';

var RadioGroup = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.valid, valid = _f === void 0 ? null : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? '' : _g, _h = _a.customCss, customCss = _h === void 0 ? '' : _h, onChange = _a.onChange, _j = _a.options, options = _j === void 0 ? [] : _j, props = __rest(_a, ["label", "description", "wrapperProps", "className", "valid", "errorMessage", "customCss", "onChange", "options"]);
    var _k = React__default.useState(props.value), value = _k[0], setValue = _k[1];
    var resolvedCss = useCustomCss(customCss);
    var id = useId(props.id);
    var descriptionId = "desc-" + id;
    var errorId = "err-" + id;
    var prevValue = usePrevious(props.value);
    var handleChange = function (e) {
        setValue(e.target.value);
        if (onChange) {
            onChange(e.target.value, e);
        }
    };
    React__default.useEffect(function () {
        if (props.value !== prevValue && props.value !== value) {
            setValue(props.value);
        }
    }, [value, props.value, prevValue]);
    return (jsxs(Wrapper, __assign({ css: resolvedCss, className: className, id: id }, wrapperProps, { children: [jsxs(FieldSet, __assign({ "aria-describedby": descriptionId }, { children: [jsx("legend", { children: jsx(VisualLabel, { children: label }, void 0) }, void 0),
                    jsx(Description, __assign({ id: descriptionId }, { children: description }), void 0),
                    options.map(function (option, index) { return (jsxs("div", { children: [jsx(Input, { type: "radio", id: id + "-" + index, name: option.group, value: option.value, "aria-describedby": errorId, "aria-invalid": valid === false, "data-valid": valid, onChange: handleChange, checked: value === option.value }, void 0),
                            jsx(RadioLabel, __assign({ htmlFor: id + "-" + index }, { children: option.label }), void 0)] }, id + "-" + index)); })] }), void 0),
            jsx(ErrorMessage, __assign({ "aria-live": "polite", "data-visible": !!errorMessage, id: errorId }, { children: errorMessage }), void 0)] }), void 0));
};
var RadioLabel = styled('label')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 2px;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  &:before {\n    position: relative;\n    top: 4px;\n    margin-right: 5px;\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    cursor: pointer;\n    height: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 50%;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: 4px;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"], ["\n  margin-bottom: 2px;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  &:before {\n    position: relative;\n    top: 4px;\n    margin-right: 5px;\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    cursor: pointer;\n    height: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 50%;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: 4px;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var Input = styled('input')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &:checked ~ label {\n    border-color: ", ";\n  }\n  &[data-valid='true'] ~ label:before {\n    border-color: ", ";\n  }\n  &[data-valid='false'] ~ label:before {\n    border-color: ", ";\n  }\n  &:focus ~ label:before,\n  &:active ~ label:before {\n    border-color: ", ";\n    outline: none;\n  }\n  &:checked ~ label:after {\n    transform: scale(1);\n  }\n"], ["\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &:checked ~ label {\n    border-color: ", ";\n  }\n  &[data-valid='true'] ~ label:before {\n    border-color: ", ";\n  }\n  &[data-valid='false'] ~ label:before {\n    border-color: ", ";\n  }\n  &:focus ~ label:before,\n  &:active ~ label:before {\n    border-color: ", ";\n    outline: none;\n  }\n  &:checked ~ label:after {\n    transform: scale(1);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var FieldSet = styled('fieldset')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  margin-left: 0px;\n  padding-left: 0px;\n  padding-bottom: 1px;\n"], ["\n  border: none;\n  margin-left: 0px;\n  padding-left: 0px;\n  padding-bottom: 1px;\n"])));
var Description = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.85em;\n  font-style: italic;\n"], ["\n  font-size: 0.85em;\n  font-style: italic;\n"])));
var VisualLabel = styled('label')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n"], ["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n"])));
var Wrapper = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  font-size: 0.9em;\n"], ["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  font-size: 0.9em;\n"])));
var ErrorMessage = styled('p')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  font-style: italic;\n  font-size: 0.85em;\n  &[data-visible='true'] {\n    margin-top: 3px;\n  }\n  &[data-visible='false'] {\n    margin: 0;\n  }\n"], ["\n  color: ", ";\n  font-style: italic;\n  font-size: 0.85em;\n  &[data-visible='true'] {\n    margin-top: 3px;\n  }\n  &[data-visible='false'] {\n    margin: 0;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.danger, 5);
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

export { RadioGroup };
//# sourceMappingURL=RadioGroup.js.map
