import type { ComponentChildren } from 'preact';
import { Field } from '../core/Field';
import { Select, type SelectOption, type SelectProps } from '../core/Select';

export type SelectFieldProps = Omit<SelectProps, 'value' | 'onChange'> & {
  label?: string;
  hint?: string;
  right?: ComponentChildren;
  value?: string;
  fieldClassName?: string;
  selectClassName?: string;
  onValueChange?: (value: string) => void;
};

export function SelectField({
  label,
  hint,
  right,
  value,
  fieldClassName,
  selectClassName,
  onValueChange,
  required,
  compact,
  'aria-label': ariaLabel,
  ...props
}: SelectFieldProps) {
  return (
    <Field
      label={label}
      hint={hint}
      right={right as any}
      required={Boolean(required)}
      className={fieldClassName}
      compact={compact}
    >
      <Select
        {...props}
        required={required}
        aria-label={ariaLabel ?? label}
        aria-required={required ? true : undefined}
        compact={compact}
        value={value}
        className={selectClassName}
        onChange={(event: any) => onValueChange?.(String(event?.currentTarget?.value ?? ''))}
      />
    </Field>
  );
}

export type { SelectOption };
