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 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 = __rest(_a, ["label", "onChange", "onClick", "className", "quantity", "hideCheckbox", "icon", "customCss"]);
    var id = useId(props.id);
    var _f = React__default.useState(props.checked), checked = _f[0], setChecked = _f[1];
    var resolvedCss = useCustomCss(customCss);
    var prevChecked = 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.useEffect(function () {
        if (props.checked !== prevChecked && props.checked !== checked) {
            setChecked(props.checked);
        }
    }, [props.checked, checked, prevChecked]);
    return (jsxs(Button, __assign({ className: className, css: resolvedCss, id: id, onClick: handleClick, role: hideCheckbox ? 'button' : 'checkbox', tabIndex: hideCheckbox ? 0 : -1, "aria-checked": !!checked }, props, { children: [icon !== undefined && jsx(IconHolder, { children: icon }, void 0),
            hideCheckbox || jsx(Checkbox, { className: id + "-checkbox" }, void 0),
            jsx(Label, { children: label }, void 0),
            quantity > 0 && jsx(Badge, { children: quantity }, void 0)] }), void 0));
};
var IconHolder = styled('div')(templateObject_1 || (templateObject_1 = __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 = styled('div')(templateObject_2 || (templateObject_2 = __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 = styled('button')(templateObject_3 || (templateObject_3 = __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 = styled('div')(templateObject_4 || (templateObject_4 = __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 = styled('div')(templateObject_5 || (templateObject_5 = __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;

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