import { RtDropdown } from '@dpa/react-dropdown';
import { RtFormFieldSizeUI, RtFormFieldText } from '@dpa/react-form-field-text';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { RtFormFieldChevronShowContext } from '@dpa/react-form-field-text';
import {
  ContextType,
  ForwardedRef,
  forwardRef,
  useCallback,
  useImperativeHandle,
  useMemo,
  useState,
} from 'react';
import { RtFormFieldComboboxProps } from './rt-form-field-combobox.types';

export const RtFormFieldCombobox = forwardRef(function RtFormFieldCombobox(
  props: RtFormFieldComboboxProps & RtBaseProps<HTMLDivElement>,
  ref: ForwardedRef<HTMLDivElement>
) {
  const {
    children,
    use,
    readonly = true,
    modifier,
    dropdownProps,
    formFieldProps,
    value,
    size,
    ui,
    formFieldComponent: FormFieldComponent,
  } = props;
  const baseProps = useRtBaseProps(props, '0.2.2');

  const [isOpen, setIsOpen] = useState(false);

  const toggleIsOpen = useCallback(() => {
    setIsOpen((v) => !v);
  }, [setIsOpen]);

  const openDropdown = useCallback(() => {
    setIsOpen(true);
  }, [setIsOpen]);

  const closeDropdown = useCallback(() => {
    setIsOpen(false);
  }, [setIsOpen]);

  const onShowChange = useCallback(
    (show: boolean) => {
      setIsOpen(show);
      dropdownProps?.onShowChange?.(show);
    },
    [setIsOpen, dropdownProps]
  );

  useImperativeHandle(props.apiRef, () => ({
    closeDropdown,
    openDropdown,
    toggleIsOpen,
  }));

  const chevronContext: ContextType<typeof RtFormFieldChevronShowContext> =
    useMemo(() => {
      return { isVisible: true, isRotated: isOpen, rotate: toggleIsOpen };
    }, [isOpen, toggleIsOpen]);

  const FormField = FormFieldComponent || RtFormFieldText;

  return (
    <RtFormFieldChevronShowContext.Provider value={chevronContext}>
      <RtDropdown
        {...dropdownProps}
        slot={children}
        model="full"
        alignment="start"
        position="bottom"
        use={dropdownProps?.use || 'cloudy'}
        show={isOpen}
        trigger={readonly ? ['click', 'manual'] : ['click', 'manual', 'focus']}
        onShowChange={onShowChange}
        radius="inherit"
        size={size}
      >
        <FormField
          ref={ref}
          modifier={modifier}
          use={use}
          value={value}
          readonly={readonly}
          {...({ ui, size } as RtFormFieldSizeUI)}
          {...baseProps}
          {...formFieldProps}
        />
      </RtDropdown>
    </RtFormFieldChevronShowContext.Provider>
  );
});

RtFormFieldCombobox.displayName = 'RtFormFieldCombobox';