import {
  WixPatternsContainer,
  TaskState,
  CollectionState,
  withoutDefaults,
} from '@wix/bex-core';
import {
  cairoSectionCtaClicked,
  cairoFiltersPanelUsed,
  cairoCtaClicked,
} from '@wix/bex-core/bi';
import type { Essentials } from '@wix/fe-essentials/core';
import { action, makeObservable, observable, runInAction } from 'mobx';

export interface ViewTypeStateParams {
  readonly container: WixPatternsContainer;
  readonly dataCapsule: Essentials['dataCapsule'];
  readonly componentType: string;
  readonly collection?: CollectionState<any, any>;
  readonly options: ViewType[];
}
export type ViewType = 'table' | 'grid' | 'spreadsheet';

export class ViewTypeState {
  viewType: ViewType = 'table';
  readonly options: ViewType[];
  readonly container;
  readonly dataCapsule;
  readonly componentType;
  readonly collection;
  readonly initTask = new TaskState();
  constructor(params: ViewTypeStateParams) {
    this.container = params.container;
    this.dataCapsule = params.dataCapsule;
    this.componentType = params.componentType;
    this.collection = params.collection;
    this.options = params.options;

    makeObservable(this, {
      viewType: observable.ref,
      changeViewType: action.bound,
    });
  }

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

  async _getViewTypeFromStorage() {
    try {
      const res = (await this.dataCapsule.getItem('view-type')) as ViewType;
      runInAction(() => {
        if (!this.options.length) return;
        this.viewType = this.options.includes(res) ? res : this.options[0]!;
      });
    } catch (err) {
      this.container.errorMonitor.captureException(err);
    }
  }

  changeViewType(newViewType: ViewType) {
    if (!this.options.length) return;

    const isLayoutToggleRedesignEnabled =
      this.container.internalExperiments?.enabled(
        'specs.cairo.layout-toggle.redesign',
      );

    if (!isLayoutToggleRedesignEnabled) {
      this.container.reportBi(
        cairoSectionCtaClicked({
          ctaType: 'More actions',
          loaction: 'Collection Toolbar',
          location: 'Collection Toolbar',
          componentType: this.componentType,
          sectionType: this.viewType,
          ctaName: `layout switch to ${newViewType}`,
          ...this.collection?._commonDynamicBiParams(),
        }),
      );
    }

    this.viewType = this.options.includes(newViewType)
      ? newViewType
      : this.options[0]!;
    this.dataCapsule.setItem('view-type', this.viewType);
  }

  reportLayoutSwitch() {
    this.container.reportBi(
      withoutDefaults(cairoFiltersPanelUsed)({
        ...this.collection?._commonDynamicBiParams(),
        feature: 'Switch Layout',
      }),
    );
  }

  reportLayoutOptionClicked(option: ViewType, index: number) {
    this.container.reportBi(
      withoutDefaults(cairoCtaClicked)({
        ...this.collection?._commonDynamicBiParams(),
        ctaName: option,
        location: 'switch_layout_dropdown',
        itemId: option,
        itemIndex: index,
      }),
    );
  }
}