import { useState } from 'react';
import { OperatorFilterPickerState } from '../state/OperatorFilterPickerState';
import { OperatorFilterValue } from '@wix/bex-core';
import type { Filter } from '@wix/bex-core';
import { useFilterToolbarState } from '../providers';

export interface UseOperatorFilterStateParams<T> {
  filter: Filter<OperatorFilterValue<T>>;
}

/**
 * Hook to create and manage OperatorFilterPickerState
 */
export function useOperatorFilterState<T>(
  params: UseOperatorFilterStateParams<T>,
) {
  const { filter } = params;
  const toolbar = useFilterToolbarState();

  const [state] = useState(
    () => new OperatorFilterPickerState<T>({ filter, toolbar }),
  );

  return state;
}