'use client';

import { c as _c } from "react/compiler-runtime";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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 = t0 => {
  const $ = _c(24);
  const {
    id: idFromProps,
    name,
    AfterInput,
    BeforeInput,
    checked,
    className,
    inputRef,
    Label,
    label,
    localized,
    onToggle,
    partialChecked,
    readOnly: readOnlyFromProps,
    required
  } = t0;
  const [isHydrated, setIsHydrated] = useState(false);
  const fallbackID = useId();
  const id = idFromProps || fallbackID;
  let t1;
  let t2;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = () => {
      setIsHydrated(true);
    };
    t2 = [];
    $[0] = t1;
    $[1] = t2;
  } else {
    t1 = $[0];
    t2 = $[1];
  }
  useEffect(t1, t2);
  const readOnly = readOnlyFromProps || !isHydrated;
  const t3 = checked && `${inputBaseClass}--checked`;
  const t4 = readOnly && `${inputBaseClass}--read-only`;
  let t5;
  if ($[2] !== className || $[3] !== t3 || $[4] !== t4) {
    t5 = [className, inputBaseClass, t3, t4].filter(Boolean);
    $[2] = className;
    $[3] = t3;
    $[4] = t4;
    $[5] = t5;
  } else {
    t5 = $[5];
  }
  const t6 = t5.join(" ");
  const t7 = Boolean(checked);
  let t8;
  if ($[6] !== AfterInput || $[7] !== BeforeInput || $[8] !== Label || $[9] !== checked || $[10] !== id || $[11] !== inputRef || $[12] !== label || $[13] !== localized || $[14] !== name || $[15] !== onToggle || $[16] !== partialChecked || $[17] !== readOnly || $[18] !== required || $[19] !== t6 || $[20] !== t7) {
    const t9 = _jsx("input", {
      "aria-label": "",
      "aria-labelledby": name,
      checked: t7,
      disabled: readOnly,
      id,
      name,
      onChange: onToggle,
      ref: inputRef,
      required,
      title: name,
      type: "checkbox"
    });
    const t10 = !checked && partialChecked ? "partial" : "check";
    let t11;
    if ($[22] !== t10) {
      t11 = [`${inputBaseClass}__icon`, t10].filter(Boolean);
      $[22] = t10;
      $[23] = t11;
    } else {
      t11 = $[23];
    }
    t8 = _jsxs("div", {
      className: t6,
      children: [_jsxs("div", {
        className: `${inputBaseClass}__input`,
        children: [BeforeInput, t9, _jsxs("span", {
          className: t11.join(" "),
          children: [checked && _jsx(CheckIcon, {}), !checked && partialChecked && _jsx(LineIcon, {})]
        }), AfterInput]
      }), _jsx(RenderCustomComponent, {
        CustomComponent: Label,
        Fallback: _jsx(FieldLabel, {
          htmlFor: id,
          label,
          localized,
          required
        })
      })]
    });
    $[6] = AfterInput;
    $[7] = BeforeInput;
    $[8] = Label;
    $[9] = checked;
    $[10] = id;
    $[11] = inputRef;
    $[12] = label;
    $[13] = localized;
    $[14] = name;
    $[15] = onToggle;
    $[16] = partialChecked;
    $[17] = readOnly;
    $[18] = required;
    $[19] = t6;
    $[20] = t7;
    $[21] = t8;
  } else {
    t8 = $[21];
  }
  return t8;
};
//# sourceMappingURL=Input.js.map