"use client";
import { comboBoxVariants } from '@heroui/styles';
import React__default, { createContext, useContext } from 'react';
import { ComboBox, Popover, ComboBoxStateContext, Button } from 'react-aria-components';
import { dataAttr } from '../../utils/assertion.js';
import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
import { IconChevronDown } from '../icons.js';
import { jsx, Fragment } from 'react/jsx-runtime';
import { SurfaceContext } from '../surface/surface.js';

const ComboBoxContext = /*#__PURE__*/createContext({});

/* -------------------------------------------------------------------------------------------------
 * ComboBox Root
 * -----------------------------------------------------------------------------------------------*/

const ComboBoxRoot = ({
  children,
  className,
  fullWidth,
  menuTrigger = "focus",
  variant,
  ...props
}) => {
  const slots = React__default.useMemo(() => comboBoxVariants({
    fullWidth
  }), [fullWidth]);
  return /*#__PURE__*/jsx(ComboBoxContext, {
    value: {
      slots,
      variant
    },
    children: /*#__PURE__*/jsx(ComboBox, {
      "data-slot": "combo-box",
      menuTrigger: menuTrigger,
      ...props,
      className: composeTwRenderProps(className, slots?.base()),
      children: values => /*#__PURE__*/jsx(Fragment, {
        children: typeof children === "function" ? children(values) : children
      })
    })
  });
};

/* -------------------------------------------------------------------------------------------------
 * ComboBox InputGroup
 * -----------------------------------------------------------------------------------------------*/

const ComboBoxInputGroup = ({
  children,
  className,
  ...props
}) => {
  const {
    slots
  } = useContext(ComboBoxContext);
  const inputGroupClassName = composeSlotClassName(slots?.inputGroup, className);
  return /*#__PURE__*/jsx("div", {
    className: inputGroupClassName,
    "data-slot": "combo-box-input-group",
    ...props,
    children: children
  });
};

/* -------------------------------------------------------------------------------------------------
 * ComboBox Trigger
 * -----------------------------------------------------------------------------------------------*/

const ComboBoxTrigger = ({
  children,
  className,
  ...rest
}) => {
  const {
    slots
  } = useContext(ComboBoxContext);
  const state = useContext(ComboBoxStateContext);
  return /*#__PURE__*/jsx(Button, {
    className: composeTwRenderProps(className, slots?.trigger()),
    "data-open": dataAttr(state?.isOpen),
    "data-slot": "combo-box-trigger",
    ...rest,
    children: children ?? /*#__PURE__*/jsx(IconChevronDown, {
      "data-slot": "combo-box-trigger-default-icon"
    })
  });
};

/* -------------------------------------------------------------------------------------------------
 * ComboBox Popover
 * -----------------------------------------------------------------------------------------------*/

const ComboBoxPopover = ({
  children,
  className,
  placement = "bottom",
  ...props
}) => {
  const {
    slots
  } = useContext(ComboBoxContext);
  return /*#__PURE__*/jsx(SurfaceContext, {
    value: {
      variant: "default"
    },
    children: /*#__PURE__*/jsx(Popover, {
      ...props,
      className: composeTwRenderProps(className, slots?.popover()),
      placement: placement,
      children: children
    })
  });
};

export { ComboBoxContext, ComboBoxInputGroup, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger };
