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

export interface UseOperatorFilterStateParams<T> {
  filter: Filter<OperatorFilterValue<T>>;
  allowedOperators: FilterOperator[];
}

/**
 * Hook to create and manage OperatorFilterPickerState
 * Follows the same pattern as useDateRangeFilterState
 */
export function useOperatorFilterState<T>(
  params: UseOperatorFilterStateParams<T>,
) {
  const { filter, allowedOperators } = params;

  const toolbar = useFilterToolbarState();

  const [state] = useState(() => {
    if (filter.value === undefined) {
      filter.changeValue(
        { operator: allowedOperators[0], value: null },
        { emitEvents: [] },
      );
    }
    return new OperatorFilterPickerState<T>({
      filter,
      toolbar,
    });
  });

  return state;
}
