import { useState } from 'react';
import { DropdownSelectFilterState } from '../state';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { ArrayField } from '@wix/bex-core';
import { useFilterToolbarState } from '../providers';

export interface UseDropdownSelectFilterStateParams<V> {
  filter: ArrayField<V>;
}

export function useDropdownSelectFilterState<V>(
  params: UseDropdownSelectFilterStateParams<V>,
) {
  const { filter } = params;

  const container = useWixPatternsContainer();
  const toolbar = useFilterToolbarState();

  const [state] = useState(
    () =>
      new DropdownSelectFilterState<V>({
        container,
        toolbar,
        filter,
      }),
  );

  return state;
}