import {
  WixPatternsContainer,
  WixPatternsContainerParams,
  CollectionState,
  FiltersMap,
  TaskState,
} from '@wix/bex-core';
import { GridFoldersState } from './GridFoldersState';
import { TableFoldersState } from './TableFoldersState';
import { runInAction, makeObservable, computed } from 'mobx';
import { ToolbarCollectionState } from './ToolbarCollectionState';
import { PartialAllFilters } from './FoldersAndItemsCollectionsState';
import { ViewTypeState, ViewType } from './ViewTypeState';
import { ICollectionComponentState } from './ICollectionComponentState';

export interface TableGridSwitchStateFoldersParams<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> {
  readonly items: CollectionState<T1, F1>;
  readonly folders: CollectionState<T2, F2>;
  readonly container: WixPatternsContainer;
  readonly containerOverrides: Partial<WixPatternsContainerParams>;
}
export class TableGridSwitchFoldersState<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> implements ICollectionComponentState
{
  readonly container;
  readonly initTask = new TaskState();
  readonly containerOverrides: Partial<WixPatternsContainerParams>;

  readonly gridFoldersState: GridFoldersState<T1, F1, T2, F2>;
  readonly tableFoldersState: TableFoldersState<T1, F1, T2, F2>;
  readonly viewTypeState: ViewTypeState;

  constructor(params: TableGridSwitchStateFoldersParams<T1, F1, T2, F2>) {
    this.container = params.container;
    this.containerOverrides = params.containerOverrides;

    this.tableFoldersState = new TableFoldersState({
      items: params.items,
      folders: params.folders,
      container: this.container,
      toolbar: new ToolbarCollectionState({
        componentType: 'TableGridSwitchFolders',
        collection: params.items as CollectionState<T1, {}> as CollectionState<
          T1,
          PartialAllFilters<F1, F2>
        >,
        container: params.container,
        reportBi: (biParams) =>
          this.container.reportBi({
            ...biParams,
            params: {
              ...biParams.params,
              componentStatus: this.viewTypeState.viewType,
            },
          }),
      }),
    });

    this.gridFoldersState = new GridFoldersState({
      items: params.items,
      folders: params.folders,
      container: this.container,
      toolbar: this.tableFoldersState.toolbar,
      collections: this.tableFoldersState.collections,
    });

    this.viewTypeState = new ViewTypeState({
      container: this.container,
      dataCapsule: this.toolbar.dataCapsule,
      componentType: 'TableGridSwitchFolders',
      options: ['table', 'grid'],
    });

    this.toolbar.layoutState = this;

    makeObservable(this, {
      viewType: computed,
    });
  }

  get viewType() {
    return this.viewTypeState.viewType;
  }

  set viewType(viewType: ViewType) {
    runInAction(() => {
      this.viewTypeState.viewType = viewType;
    });
  }

  get toolbar() {
    return this.tableFoldersState.toolbar;
  }

  init() {
    this.initTask.runOnce(async () => {
      await this.viewTypeState.init();
    });
  }
}