var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState, useEffect } from 'react';
import { _cx } from 'src/utility/class';
import css from './CheckBox.module.scss';
var cx = _cx(css);
var CheckBox = function (props) {
    var name = props.name, label = props.label, checked = props.checked, onChange = props.onChange, width = props.width, _a = props.showInfoIcon, showInfoIcon = _a === void 0 ? false : _a, infoClickHandler = props.infoClickHandler;
    var _b = __read(useState(checked), 2), isChecked = _b[0], setIsChecked = _b[1];
    useEffect(function () {
        setIsChecked(checked);
    }, [checked]);
    var handleClick = function () {
        var newCheckedState = !isChecked;
        setIsChecked(newCheckedState);
        onChange(newCheckedState);
    };
    return (_jsx(_Fragment, { children: label && (_jsxs("div", { className: cx('radio-wrap', isChecked && 'checked_radio'), style: { width: width }, children: [_jsx("div", { className: cx(isChecked ? 'type_Radio_cheked' : 'type_Radio'), onClick: handleClick }), _jsx("input", { type: "checkbox", name: name, checked: isChecked, "aria-label": "CheckBox", readOnly: true }), _jsx("span", { className: cx('labelRichText'), onClick: handleClick, children: label }), showInfoIcon && (_jsx("span", { className: cx('infoIcon'), onClick: infoClickHandler, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z", fill: "#727272" }) }) }))] })) }));
};
export default React.memo(CheckBox);
