import {
  ArrayField,
  WixPatternsContainer,
  KeyedItem,
  SelectState,
} from '@wix/bex-core';
import { DropdownSelectState } from './DropdownSelectState';
import { action, makeObservable } from 'mobx';
import { FilterToolbarState } from '../providers';

export interface DropdownSelectFilterStateParams<V> {
  container: WixPatternsContainer;
  toolbar: FilterToolbarState;
  filter: ArrayField<V>;
}

export class DropdownSelectFilterState<V> {
  readonly select;
  readonly dropdownSelect;

  constructor(params: DropdownSelectFilterStateParams<V>) {
    this.select = new SelectState<KeyedItem<V>>({
      keyGetter: (value) => value.key,
    });

    this.dropdownSelect = new DropdownSelectState<V>({
      select: this.select,
      container: params.container,
      toolbar: params.toolbar,
      filter: params.filter,
    });

    makeObservable(this, {
      init: action.bound,
    });
  }

  init() {
    const { dropdownSelect } = this;
    const dispose = dropdownSelect.init();

    return () => {
      dispose();
    };
  }
}