'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-3b4575a4.js');
var utilities = require('./utilities-d51a0c2d.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var ButtBox = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, onChange = _a.onChange, onClick = _a.onClick, className = _a.className, _c = _a.quantity, quantity = _c === void 0 ? 0 : _c, _d = _a.hideCheckbox, hideCheckbox = _d === void 0 ? false : _d, icon = _a.icon, _e = _a.customCss, customCss = _e === void 0 ? '' : _e, props = _tslib.__rest(_a, ["label", "onChange", "onClick", "className", "quantity", "hideCheckbox", "icon", "customCss"]);
    var id = autoId_esm.useId(props.id);
    var _f = React__default['default'].useState(props.checked), checked = _f[0], setChecked = _f[1];
    var resolvedCss = utilities.useCustomCss(customCss);
    var prevChecked = utilities.usePrevious(props.checked);
    var handleClick = function (e) {
        if (hideCheckbox) {
            if (onClick) {
                onClick(e);
            }
        }
        else {
            if (onChange || props.checked === undefined) {
                setChecked(!checked);
                if (onChange) {
                    onChange(!checked, e);
                }
            }
        }
    };
    React__default['default'].useEffect(function () {
        if (props.checked !== prevChecked && props.checked !== checked) {
            setChecked(props.checked);
        }
    }, [props.checked, checked, prevChecked]);
    return (jsxRuntime.jsxs(Button, _tslib.__assign({ className: className, css: resolvedCss, id: id, onClick: handleClick, role: hideCheckbox ? 'button' : 'checkbox', tabIndex: hideCheckbox ? 0 : -1, "aria-checked": !!checked }, props, { children: [icon !== undefined && jsxRuntime.jsx(IconHolder, { children: icon }, void 0),
            hideCheckbox || jsxRuntime.jsx(Checkbox, { className: id + "-checkbox" }, void 0),
            jsxRuntime.jsx(Label, { children: label }, void 0),
            quantity > 0 && jsxRuntime.jsx(Badge, { children: quantity }, void 0)] }), void 0));
};
var IconHolder = css.styled('div')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  > svg,\n  img {\n    display: inline-block;\n    width: 1em;\n    margin-right: 8px;\n    fill: #000;\n  }\n"], ["\n  > svg,\n  img {\n    display: inline-block;\n    width: 1em;\n    margin-right: 8px;\n    fill: #000;\n  }\n"])));
var Checkbox = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 14px;\n  width: 14px;\n  border: 1px solid #c4c4c4;\n  border-radius: 4px;\n  background: #fff;\n  margin-right: 10px;\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: block;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    margin: 1px;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"], ["\n  height: 14px;\n  width: 14px;\n  border: 1px solid #c4c4c4;\n  border-radius: 4px;\n  background: #fff;\n  margin-right: 10px;\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: block;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    margin: 1px;\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.primary;
});
var Button = css.styled('button')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  background: #e9ebef;\n  border-radius: 9px;\n  border: none;\n  height: 41px;\n  padding: 10px;\n  &:focus-visible {\n    outline: none;\n  }\n  &:active {\n    background-color: #dce0e6;\n  }\n  &:hover {\n    background-color: #f8f9fa;\n  }\n  &[aria-checked='true'] > div[class*='checkbox']:after {\n    background: ", ";\n    transform: scale(1);\n  }\n"], ["\n  cursor: pointer;\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  background: #e9ebef;\n  border-radius: 9px;\n  border: none;\n  height: 41px;\n  padding: 10px;\n  &:focus-visible {\n    outline: none;\n  }\n  &:active {\n    background-color: #dce0e6;\n  }\n  &:hover {\n    background-color: #f8f9fa;\n  }\n  &[aria-checked='true'] > div[class*='checkbox']:after {\n    background: ", ";\n    transform: scale(1);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var Label = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  font-size: 1.125em;\n  font-weight: 600;\n  letter-spacing: 0px;\n  color: #282c39;\n  opacity: 1;\n"], ["\n  font-size: 1.125em;\n  font-weight: 600;\n  letter-spacing: 0px;\n  color: #282c39;\n  opacity: 1;\n"])));
var Badge = css.styled('div')(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  color: #fff;\n  border-radius: 7px;\n  background: ", ";\n  font-size: 0.625em;\n  font-weight: bold;\n  min-width: 14px;\n  height: 14px;\n  padding: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 10px;\n"], ["\n  color: #fff;\n  border-radius: 7px;\n  background: ", ";\n  font-size: 0.625em;\n  font-weight: bold;\n  min-width: 14px;\n  height: 14px;\n  padding: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 10px;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

exports.ButtBox = ButtBox;
//# sourceMappingURL=ButtBox.js.map
