"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxControl = exports.Checkbox = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const Icon_1 = require("../Icon");
const VisuallyHidden_1 = require("../VisuallyHidden");
const HiddenForAccessibility_1 = require("../HiddenForAccessibility");
const InlineError_1 = require("../InlineError");
const Theme_1 = require("../Theme");
const id_1 = require("../../utilities/id");
const errors_1 = require("../../utilities/errors");
const typography_styles_css_1 = __importDefault(require("../../utilities/typography-styles.css"));
const Checkbox_css_1 = __importDefault(require("./Checkbox.css"));
const createId = id_1.createIdCreator('Checkbox');
function Checkbox(_a) {
    var { id: explicitId, name, accessibilityLabel, error, disabled, children } = _a, rest = __rest(_a, ["id", "name", "accessibilityLabel", "error", "disabled", "children"]);
    const id = id_1.useId(explicitId, createId);
    const { checkbox: { errorIndentation, errorTypographyStyle }, } = Theme_1.useThemeConfiguration();
    const errorMarkup = error ? (<div className={css_utilities_1.classNames(Checkbox_css_1.default.Error, errorTypographyStyle && typography_styles_css_1.default[errorTypographyStyle])}>
      <InlineError_1.InlineError controlID={id}>{error}</InlineError_1.InlineError>
    </div>) : null;
    const labelClassName = css_utilities_1.classNames(Checkbox_css_1.default.Label, disabled && Checkbox_css_1.default['Label-isDisabled']);
    const hasError = Boolean(error);
    return (<div className={css_utilities_1.classNames(Checkbox_css_1.default.Wrapper, hasError && Checkbox_css_1.default.hasError, hasError &&
        errorIndentation &&
        Checkbox_css_1.default[css_utilities_1.variationName('errorIndentation', errorIndentation)])}>
      <CheckboxControl id={id} name={name} error={Boolean(error)} disabled={disabled} {...rest}/>
      <label htmlFor={id} className={labelClassName}>
        {accessibilityLabel ? (<>
            <VisuallyHidden_1.VisuallyHidden>{accessibilityLabel}</VisuallyHidden_1.VisuallyHidden>
            <HiddenForAccessibility_1.HiddenForAccessibility>{children}</HiddenForAccessibility_1.HiddenForAccessibility>
          </>) : (children)}
      </label>
      {errorMarkup}
    </div>);
}
exports.Checkbox = Checkbox;
function CheckboxControl({ id, name, value = false, checked = value, disabled, error = false, onChange, }) {
    const { controls: { background: controlsBackground }, checkbox: { background: checkboxBackground, borderColor = 'base' }, } = Theme_1.useThemeConfiguration();
    const background = checkboxBackground || controlsBackground || 'surfaceTertiary';
    const className = css_utilities_1.classNames(Checkbox_css_1.default.Input, error && Checkbox_css_1.default['Input-hasError'], disabled && Checkbox_css_1.default['Input-isDisabled'], Checkbox_css_1.default[css_utilities_1.variationName('Input-background', background)], Checkbox_css_1.default[css_utilities_1.variationName('Input-borderColor', borderColor)]);
    return (<div className={Checkbox_css_1.default.Checkbox}>
      <input type="checkbox" id={id} name={name} checked={checked} disabled={disabled} onChange={({ currentTarget }) => {
        onChange === null || onChange === void 0 ? void 0 : onChange(currentTarget.checked);
    }} className={className} aria-describedby={error ? errors_1.errorId(id) : undefined} aria-invalid={error}/>
      <div className={Checkbox_css_1.default.Icon}>
        <Icon_1.Icon source="checkmark" size="small"/>
      </div>
    </div>);
}
exports.CheckboxControl = CheckboxControl;