import { __assign, __read, __rest } from "tslib";
import React, { useState } from 'react';
import { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';
import { cnChoiceGroup } from '../ChoiceGroup';
export var ChoiceGroupItem = function (props) {
    var label = props.label, onChange = props.onChange, checked = props.checked, multiple = props.multiple, Icon = props.icon, onlyIcon = props.onlyIcon, name = props.name, iconSize = props.iconSize, disabled = props.disabled, otherProps = __rest(props, ["label", "onChange", "checked", "multiple", "icon", "onlyIcon", "name", "iconSize", "disabled"]);
    var _a = __read(useState(false), 2), focus = _a[0], setFocus = _a[1];
    var handleBlur = function () { return setFocus(false); };
    var handleFocus = function () { return setFocus(true); };
    return (React.createElement("label", __assign({ className: cnChoiceGroup('Label', { focus: focus, checked: checked, disabled: disabled }, [cnMixFocus()]), title: onlyIcon ? label : undefined }, otherProps),
        React.createElement("input", { type: multiple ? 'checkbox' : 'radio', className: cnChoiceGroup('Input'), checked: checked, onFocus: handleFocus, onBlur: handleBlur, value: "".concat(name, "-").concat(label), onChange: onChange, name: name }),
        Icon && React.createElement(Icon, { className: cnChoiceGroup('Icon'), size: iconSize }),
        !onlyIcon && React.createElement("span", { className: cnChoiceGroup('Text') }, label)));
};
