"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.RadioControl = exports.Radio = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const HiddenForAccessibility_1 = require("../HiddenForAccessibility");
const VisuallyHidden_1 = require("../VisuallyHidden");
const Theme_1 = require("../Theme");
const id_1 = require("../../utilities/id");
const Radio_css_1 = __importDefault(require("./Radio.css"));
const createId = id_1.createIdCreator('Radio');
function Radio(_a) {
    var { id: explicitId, accessibilityLabel, children, disabled } = _a, rest = __rest(_a, ["id", "accessibilityLabel", "children", "disabled"]);
    const id = id_1.useId(explicitId, createId);
    const className = css_utilities_1.classNames(Radio_css_1.default.Label, disabled && Radio_css_1.default['Label-isDisabled']);
    return (<div className={Radio_css_1.default.Wrapper}>
      <exports.RadioControl id={id} disabled={disabled} {...rest}/>
      <label htmlFor={id} className={className}>
        {accessibilityLabel ? (<>
            <VisuallyHidden_1.VisuallyHidden>{accessibilityLabel}</VisuallyHidden_1.VisuallyHidden>
            <HiddenForAccessibility_1.HiddenForAccessibility>{children}</HiddenForAccessibility_1.HiddenForAccessibility>
          </>) : (children)}
      </label>
    </div>);
}
exports.Radio = Radio;
exports.RadioControl = ({ id, name, value = false, checked = value, disabled, onChange, }) => {
    const { controls: { background: controlsBackground }, radio: { background: radioBackground, borderColor = 'base', checkedStyle = 'ring', checkedColor = 'interactive', size = 'base', }, } = Theme_1.useThemeConfiguration();
    const background = radioBackground || controlsBackground || 'surfaceTertiary';
    const className = css_utilities_1.classNames(Radio_css_1.default.Input, disabled && Radio_css_1.default['Input-isDisabled'], Radio_css_1.default[css_utilities_1.variationName('Input-size', size)], Radio_css_1.default[css_utilities_1.variationName('Input-background', background)], Radio_css_1.default[css_utilities_1.variationName('Input-borderColor', borderColor)], Radio_css_1.default[css_utilities_1.variationName('Input-checkedStyle', checkedStyle)], Radio_css_1.default[css_utilities_1.variationName('Input-checkedColor', checkedColor)]);
    return (<div className={Radio_css_1.default.Radio}>
      <input type="radio" id={id} name={name} checked={checked} disabled={disabled} onChange={({ currentTarget }) => {
        onChange === null || onChange === void 0 ? void 0 : onChange(currentTarget.checked);
    }} className={className}/>
    </div>);
};