'use client';

import { Combobox as ChakraCombobox, Portal } from '@chakra-ui/react';
import { CloseButton } from '@/components/ui/buttons/close-button';
import * as React from 'react';

interface ComboboxControlProps extends ChakraCombobox.ControlProps {
  clearable?: boolean;
}

export const ComboboxControl = React.forwardRef<HTMLDivElement, ComboboxControlProps>(
  function ComboboxControl(props, ref) {
    const { children, clearable, ...rest } = props;
    return (
      <ChakraCombobox.Control {...rest} ref={ref}>
        {children}
        <ChakraCombobox.IndicatorGroup>
          {clearable && <ComboboxClearTrigger />}
          <ChakraCombobox.Trigger />
        </ChakraCombobox.IndicatorGroup>
      </ChakraCombobox.Control>
    );
  },
);

const ComboboxClearTrigger = React.forwardRef<HTMLButtonElement, ChakraCombobox.ClearTriggerProps>(
  function ComboboxClearTrigger(props, ref) {
    return (
      <ChakraCombobox.ClearTrigger asChild {...props} ref={ref}>
        <CloseButton size='xs' variant='plain' focusVisibleRing='inside' focusRingWidth='2px' pointerEvents='auto' />
      </ChakraCombobox.ClearTrigger>
    );
  },
);

interface ComboboxContentProps extends ChakraCombobox.ContentProps {
  portalled?: boolean;
  portalRef?: React.RefObject<HTMLElement | null>;
}

export const ComboboxContent = React.forwardRef<HTMLDivElement, ComboboxContentProps>(
  function ComboboxContent(props, ref) {
    const { portalled = true, portalRef, ...rest } = props;
    return (
      <Portal disabled={!portalled} container={portalRef}>
        <ChakraCombobox.Positioner>
          <ChakraCombobox.Content {...rest} ref={ref} />
        </ChakraCombobox.Positioner>
      </Portal>
    );
  },
);

export const ComboboxItem = React.forwardRef<HTMLDivElement, ChakraCombobox.ItemProps>(
  function ComboboxItem(props, ref) {
    const { item, children, ...rest } = props;
    return (
      <ChakraCombobox.Item key={item.value} item={item} {...rest} ref={ref}>
        {children}
        <ChakraCombobox.ItemIndicator />
      </ChakraCombobox.Item>
    );
  },
);

export const ComboboxRoot = React.forwardRef<HTMLDivElement, ChakraCombobox.RootProps>(
  function ComboboxRoot(props, ref) {
    return <ChakraCombobox.Root {...props} ref={ref} positioning={{ sameWidth: true, ...props.positioning }} />;
  },
) as ChakraCombobox.RootComponent;

interface ComboboxItemGroupProps extends ChakraCombobox.ItemGroupProps {
  label: React.ReactNode;
}

export const ComboboxItemGroup = React.forwardRef<HTMLDivElement, ComboboxItemGroupProps>(
  function ComboboxItemGroup(props, ref) {
    const { children, label, ...rest } = props;
    return (
      <ChakraCombobox.ItemGroup {...rest} ref={ref}>
        <ChakraCombobox.ItemGroupLabel>{label}</ChakraCombobox.ItemGroupLabel>
        {children}
      </ChakraCombobox.ItemGroup>
    );
  },
);

export const ComboboxLabel = ChakraCombobox.Label;
export const ComboboxInput = ChakraCombobox.Input;
export const ComboboxEmpty = ChakraCombobox.Empty;
export const ComboboxItemText = ChakraCombobox.ItemText;