"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioControl = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const Theme_1 = require("../Theme");
const id_1 = require("../../utilities/id");
const RadioControl_css_1 = __importDefault(require("./RadioControl.css"));
const createId = id_1.createIdCreator('Radio');
function RadioControl({ id: explicitId, name, value = false, checked = value, disabled, onChange, }) {
    const id = id_1.useId(explicitId, createId);
    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(RadioControl_css_1.default.Input, disabled && RadioControl_css_1.default['Input-isDisabled'], RadioControl_css_1.default[css_utilities_1.variationName('Input-size', size)], RadioControl_css_1.default[css_utilities_1.variationName('Input-background', background)], RadioControl_css_1.default[css_utilities_1.variationName('Input-borderColor', borderColor)], RadioControl_css_1.default[css_utilities_1.variationName('Input-checkedStyle', checkedStyle)], RadioControl_css_1.default[css_utilities_1.variationName('Input-checkedColor', checkedColor)]);
    return (<div className={RadioControl_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>);
}
exports.RadioControl = RadioControl;