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';
import { InputWrapper } from './InputWrapper.js';

var Checkbox = function (_a) {
    var userProvidedId = _a.id, _b = _a.description, description = _b === void 0 ? '' : _b, _c = _a.wrapperProps, wrapperProps = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.valid, valid = _e === void 0 ? null : _e, _f = _a.errorMessage, errorMessage = _f === void 0 ? '' : _f, _g = _a.customCss, customCss = _g === void 0 ? '' : _g, objectLabel = _a.objectLabel, onChange = _a.onChange, props = __rest(_a, ["id", "description", "wrapperProps", "className", "valid", "errorMessage", "customCss", "objectLabel", "onChange"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(userProvidedId);
    var descriptionId = "desc-" + id;
    var errorId = "err-" + id;
    var isValidLabel = function (label, ariaLabel) {
        if (label && !ariaLabel) {
            if (typeof label === 'string' && label.length > 0) {
                return true;
            }
        }
        else if (ariaLabel) {
            if (ariaLabel.length > 0) {
                return true;
            }
        }
        return false;
    };
    var label = !isValidLabel(props.label, props.ariaLabel)
        ? 'The label or ariaLabel prop is required and must be a string of a least length 1.'
        : props.label;
    var _h = React__default.useState(props.checked), checked = _h[0], setChecked = _h[1];
    var prevChecked = usePrevious(props.checked);
    var handleChange = function (e) {
        setChecked(!checked);
        if (onChange) {
            onChange(e.target.checked, e);
        }
    };
    React__default.useEffect(function () {
        if (props.checked !== prevChecked && props.checked !== checked) {
            setChecked(props.checked);
        }
    }, [checked, props.checked, prevChecked]);
    return (jsxs(InputWrapper, __assign({ customCss: resolvedCss, className: className, label: label, description: description, errorMessage: errorMessage, id: id, descriptionId: descriptionId, errorId: errorId, childLabel: true }, wrapperProps, { children: [jsx(Input, __assign({ type: "checkbox", "aria-describedby": description ? descriptionId + " " + errorId : "" + errorId, "aria-invalid": valid === false, "data-valid": valid, id: id, "data-checked": checked, onChange: handleChange, "aria-label": props.ariaLabel }, props), void 0),
            jsx(Label, __assign({ htmlFor: id }, { children: jsx("span", { children: objectLabel || label }, void 0) }), void 0)] }), void 0));
};
var Label = styled('label')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  margin-top: -2px;\n  display: flex;\n  span {\n    padding-top: 6px;\n    overflow-wrap: anywhere;\n  }\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    min-width: 20px;\n    max-width: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 5px;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n    margin: auto 5px auto 0;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: calc(50% - 1px);\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\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-weight: 600;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  margin-top: -2px;\n  display: flex;\n  span {\n    padding-top: 6px;\n    overflow-wrap: anywhere;\n  }\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    min-width: 20px;\n    max-width: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 5px;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n    margin: auto 5px auto 0;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: calc(50% - 1px);\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\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  position: relative;\n  top: -3px;\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &[data-checked='true'] ~ 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  &[data-checked='true'] ~ label:after {\n    transform: scale(1);\n  }\n  &:disabled ~ label:before {\n    background-color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  &:disabled ~ label {\n    cursor: not-allowed;\n  }\n"], ["\n  position: relative;\n  top: -3px;\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &[data-checked='true'] ~ 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  &[data-checked='true'] ~ label:after {\n    transform: scale(1);\n  }\n  &:disabled ~ label:before {\n    background-color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  &:disabled ~ label {\n    cursor: not-allowed;\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;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.secondary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
});
var templateObject_1, templateObject_2;

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