import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { ForwardedRef, forwardRef, ReactNode } from 'react';
import { RtFormFieldCombobox } from '@dpa/react-form-field-combobox';
import { RtFormFieldSelectProps } from '../rt-form-field-select.types';
import classNames from 'classnames/bind';
import styles from '../styles/rt-form-field-select.module.css';
import { useDefaultProps } from '../hooks/use-default-props';
import { useSelect } from '../hooks/use-select';
import { RtFormFieldSizeUI } from '@dpa/react-form-field-text';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtFormFieldTextForSelect } from './rt-form-field-text-for-select';
import { SelectedOptionsContext } from '../context/selected-options-context';
import { Virtuoso } from 'react-virtuoso';

const cn = classNames.bind(styles);

export const RtFormFieldSelect: <M extends boolean = false>(
  props: RtFormFieldSelectProps<M> &
    RtBaseProps<HTMLDivElement> & { ref?: ForwardedRef<HTMLDivElement> }
) => ReactNode = forwardRef(function RtFormFieldSelect(_props, ref) {
  const props = useDefaultProps(_props);
  const {
    use,
    modifier,
    ui,
    size,
    labelInValue,
    multiple,
    options,
    value,
    listMaxHeight,
    onChange,
    maxTagCount,
    disabled,
    sortFn,
    filterFn,
    filterMode,
    onFocus,
    onBlur,
    listMaxItemsHeight,
    shouldRenderSelectedOptions,
    dropdownProps,
    dropdownRender: _dropdownRender,
    optionRender: _optionRender,
    notFoundContent: _notFoundContent,
    onDeselect,
    onDropdownScroll,
    onDropdownScrollToBottomEnd,
    selectedOptionsRenderFn,

    ...formFieldTextProps
  } = props;
  const baseProps = useRtBaseProps(props, '0.2.2');

  const {
    apiRef,
    inputRef,
    handleClear,
    handleSelect,
    selectedLabel,
    selectedValueId,
    selectedValuesList,
    selectedOptions,
    onDebounceFilter,
    filteredOptions,
    searchValue,
    notFoundContent,
    optionRender,
    dropdownRender,
    dropdownScrollHandler,
    virtualMaxItemsLength,
  } = useSelect(props);

  return (
    <SelectedOptionsContext.Provider
      value={{
        selectedOptions,
        multiple,
        handleSelect,
        maxTagCount,
        onDebounceFilter,
        filterMode,
        searchValue,
        shouldRenderSelectedOptions,
        selectedOptionsRenderFn,
      }}
    >
      <RtFormFieldCombobox
        {...baseProps}
        ref={ref}
        apiRef={apiRef}
        use={use}
        value={selectedLabel}
        modifier={modifier}
        readonly={false}
        formFieldProps={{
          ...formFieldTextProps,
          disabled,
          onClear: handleClear,
          inputRef,
        }}
        dropdownProps={{
          use: props.dropdownProps?.use || 'cloudy',
          disabled,
          onShowChange(show) {
            props.dropdownProps?.onShowChange?.(show);
            if (!show && props.autoClearFilterValue)
              setTimeout(() => onDebounceFilter(''), 300);
          },
          animation: props.dropdownProps?.animation,
          closeOnOutsidePress: props.dropdownProps?.closeOnOutsidePress,
          zIndex: props.dropdownProps?.zIndex,
        }}
        {...({ ui, size } as RtFormFieldSizeUI)}
        formFieldComponent={RtFormFieldTextForSelect}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
      >
        <RtFrame use="foggy" className={cn('rt-select-list')}>
          {dropdownRender(
            <>
              <Virtuoso
                style={{
                  height:
                    listMaxHeight ||
                    `calc((3.5em * ${virtualMaxItemsLength}) + (0.5em * ${
                      virtualMaxItemsLength - 1
                    }))`,
                }}
                data={filteredOptions}
                onScroll={dropdownScrollHandler}
                itemContent={(index, option) => {
                  return (
                    <div
                      key={option.value}
                      onClick={(e) => handleSelect(option, e)}
                      onMouseDown={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                      }}
                      style={{
                        paddingBottom:
                          index !== filteredOptions.length - 1 ? '0.5em' : 0,
                      }}
                    >
                      {optionRender(option, {
                        index,
                        isActive: multiple
                          ? selectedValuesList.includes(option.value)
                          : selectedValueId === option.value,
                      })}
                    </div>
                  );
                }}
              />
              {filteredOptions.length === 0 && notFoundContent}
            </>
          )}
        </RtFrame>
      </RtFormFieldCombobox>
    </SelectedOptionsContext.Provider>
  );
});