"use client";
import { checkboxVariants } from '@heroui/styles';
import React__default, { useContext, createContext } from 'react';
import { Checkbox } from 'react-aria-components';
import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
import { CheckboxGroupContext } from '../checkbox-group/checkbox-group.js';
import { jsx } from 'react/jsx-runtime';

const CheckboxContext = /*#__PURE__*/createContext({});
const CheckboxRoot = ({
  children,
  className,
  variant,
  ...props
}) => {
  const checkboxGroupContext = useContext(CheckboxGroupContext);
  const effectiveVariant = variant ?? checkboxGroupContext.variant;
  const slots = React__default.useMemo(() => checkboxVariants({
    variant: effectiveVariant
  }), [effectiveVariant]);
  return /*#__PURE__*/jsx(Checkbox, {
    "data-slot": "checkbox",
    ...props,
    className: composeTwRenderProps(className, slots.base()),
    children: values => /*#__PURE__*/jsx(CheckboxContext, {
      value: {
        slots,
        state: values
      },
      children: typeof children === "function" ? children(values) : children
    })
  });
};

/* -----------------------------------------------------------------------------------------------*/

const CheckboxControl = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(CheckboxContext);
  return /*#__PURE__*/jsx("span", {
    className: composeSlotClassName(slots?.control, className),
    "data-slot": "checkbox-control",
    ...props,
    children: children
  });
};

/* -----------------------------------------------------------------------------------------------*/

const CheckboxIndicator = ({
  children,
  className,
  ...props
}) => {
  const {
    slots,
    state
  } = useContext(CheckboxContext);
  const isSelected = state?.isSelected;
  const isIndeterminate = state?.isIndeterminate;
  const content = typeof children === "function" ? children(state ?? {}) : children ? children : isIndeterminate ? /*#__PURE__*/jsx("svg", {
    "aria-hidden": "true",
    "data-slot": "checkbox-default-indicator--indeterminate",
    fill: "none",
    role: "presentation",
    stroke: "currentColor",
    strokeLinecap: "round",
    strokeWidth: 3,
    viewBox: "0 0 24 24",
    children: /*#__PURE__*/jsx("line", {
      x1: "21",
      x2: "3",
      y1: "12",
      y2: "12"
    })
  }) : /*#__PURE__*/jsx("svg", {
    "aria-hidden": "true",
    "data-slot": "checkbox-default-indicator--checkmark",
    fill: "none",
    role: "presentation",
    stroke: "currentColor",
    strokeDasharray: 22,
    strokeDashoffset: isSelected ? 44 : 66,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: 2,
    viewBox: "0 0 17 18",
    children: /*#__PURE__*/jsx("polyline", {
      points: "1 9 7 14 15 4"
    })
  });
  return /*#__PURE__*/jsx("span", {
    "aria-hidden": "true",
    className: composeSlotClassName(slots?.indicator, className),
    "data-slot": "checkbox-indicator",
    ...props,
    children: content
  });
};

/* -----------------------------------------------------------------------------------------------*/

const CheckboxContent = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(CheckboxContext);
  return /*#__PURE__*/jsx("div", {
    className: composeSlotClassName(slots?.content, className),
    "data-slot": "checkbox-content",
    ...props,
    children: children
  });
};

export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };
