'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useEffect, useId, useState } from 'react';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { CheckIcon } from '../../icons/Check/index.js';
import { LineIcon } from '../../icons/Line/index.js';
export const inputBaseClass = 'checkbox-input';
export const CheckboxInput = ({ id: idFromProps, name, AfterInput, BeforeInput, checked, className, inputRef, Label, label, localized, onToggle, partialChecked, readOnly: readOnlyFromProps, required })=>{
    const [isHydrated, setIsHydrated] = useState(false);
    const fallbackID = useId();
    const id = idFromProps || fallbackID;
    useEffect(()=>{
        setIsHydrated(true);
    }, []);
    const readOnly = readOnlyFromProps || !isHydrated;
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            className,
            inputBaseClass,
            checked && `${inputBaseClass}--checked`,
            readOnly && `${inputBaseClass}--read-only`
        ].filter(Boolean).join(' '),
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${inputBaseClass}__input`,
                children: [
                    BeforeInput,
                    /*#__PURE__*/ _jsxDEV("input", {
                        "aria-label": "",
                        "aria-labelledby": name,
                        checked: Boolean(checked),
                        disabled: readOnly,
                        id: id,
                        name: name,
                        onChange: onToggle,
                        ref: inputRef,
                        required: required,
                        title: name,
                        type: "checkbox"
                    }, void 0, false, {
                        fileName: "src/fields/Checkbox/Input.tsx",
                        lineNumber: 69,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("span", {
                        className: [
                            `${inputBaseClass}__icon`,
                            !checked && partialChecked ? 'partial' : 'check'
                        ].filter(Boolean).join(' '),
                        children: [
                            checked && /*#__PURE__*/ _jsxDEV(CheckIcon, {}, void 0, false, {
                                fileName: "src/fields/Checkbox/Input.tsx",
                                lineNumber: 87,
                                columnNumber: 23
                            }, this),
                            !checked && partialChecked && /*#__PURE__*/ _jsxDEV(LineIcon, {}, void 0, false, {
                                fileName: "src/fields/Checkbox/Input.tsx",
                                lineNumber: 88,
                                columnNumber: 42
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Checkbox/Input.tsx",
                        lineNumber: 82,
                        columnNumber: 9
                    }, this),
                    AfterInput
                ]
            }, void 0, true, {
                fileName: "src/fields/Checkbox/Input.tsx",
                lineNumber: 67,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    htmlFor: id,
                    label: label,
                    localized: localized,
                    required: required
                }, void 0, false, {
                    fileName: "src/fields/Checkbox/Input.tsx",
                    lineNumber: 95,
                    columnNumber: 11
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Checkbox/Input.tsx",
                lineNumber: 92,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Checkbox/Input.tsx",
        lineNumber: 57,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=Input.js.map