import React from 'react';
import { Listbox } from '@headlessui/react';

import { forwardRef } from '../utils/react';
import { As } from '../types';

/*-- Types --*/

type ListboxContext = {
  open: boolean;
  disabled: boolean;
};

type ListboxProps = {
  value: unknown;
  onChange(value: unknown): void;
  disabled?: boolean | undefined;
  horizontal?: boolean | undefined;
  name?: string | undefined;
  multiple?: boolean | undefined;
  children?:
    | React.ReactNode
    | ((context: ListboxContext) => React.ReactElement);
  className?: string | ((context: ListboxContext) => string);
};

export interface SelectProps extends ListboxProps {}

/*-- Main --*/

export const Select = forwardRef<As, SelectProps>(function Select(props, ref) {
  return <Listbox ref={ref} {...props} />;
});