import { action, makeObservable, observable } from 'mobx';
import type { CollectionState } from '@wix/bex-core';
import {
  ConditionalModalState,
  FiltersMap,
  KeyedItem,
  ReportBI,
} from '@wix/bex-core';
import { MessageModalLayoutProps } from '@wix/design-system';
import { ConfirmModalBIReporter } from './ConfirmModalBIReporter';

type Fade = 'static' | 'idle' | 'exit' | 'exiting';

export interface ActionCellAPI<T, F extends FiltersMap> {
  openConfirmModal: (props?: Partial<MessageModalLayoutProps>) => void;
  openConfirmDeleteModal: (props?: Partial<MessageModalLayoutProps>) => void;
  collection: CollectionState<T, F>;
  keyedItem: KeyedItem<T>;
}

export interface ItemActionsStateParams<T, F extends FiltersMap = FiltersMap> {
  fade: Fade;
  keyedItem: KeyedItem<T>;
  collection: CollectionState<T, F>;
  reportBi?: ReportBI;
}

export class ItemActionsState<T, F extends FiltersMap = FiltersMap> {
  keyedItem: KeyedItem<T>;
  fade: Fade;
  readonly collection: CollectionState<T, F>;
  readonly biReporter: ConfirmModalBIReporter | null;

  readonly confirmModal = new ConditionalModalState<
    Partial<MessageModalLayoutProps>
  >();

  readonly actionCellAPI: ActionCellAPI<T, F>;

  constructor(params: ItemActionsStateParams<T, F>) {
    this.fade = params.fade;
    this.keyedItem = params.keyedItem;
    this.collection = params.collection;

    this.biReporter = params.reportBi
      ? new ConfirmModalBIReporter({
          reportBi: params.reportBi,
          itemId: params.keyedItem.id,
          itemIndex: params.keyedItem.indexWithinPage,
        })
      : null;

    makeObservable(this, {
      keyedItem: observable.ref,
      fade: observable.ref,
      onFadeStart: action.bound,
      onFadeDone: action.bound,
      setItemIfChanged: action,
      openConfirmModal: action.bound,
      openConfirmDeleteModal: action.bound,
    });

    this.actionCellAPI = {
      openConfirmModal: this.openConfirmModal,
      openConfirmDeleteModal: this.openConfirmDeleteModal,
      collection: this.collection,
      keyedItem: this.keyedItem,
    };
  }

  openConfirmModal(props?: Partial<MessageModalLayoutProps>) {
    const { translate: t } = this.collection;
    this.confirmModal.open({
      title: t('cairo.confirmModal.title'),
      primaryButtonText: t('cairo.confirm.button'),
      secondaryButtonText: t('cairo.cancel.button'),
      ...props,
    });
  }

  openConfirmDeleteModal(props?: Partial<MessageModalLayoutProps>) {
    const { translate: t } = this.collection;

    if (!this.confirmModal.isOpen) {
      this.biReporter?.reportDeleteModalShown();
    }

    this.openConfirmModal({
      theme: 'destructive',
      title: t('cairo.deleteModal.title'),
      content: t('cairo.deleteModal.body'),
      ...props,
      primaryButtonOnClick: () => {
        this.biReporter?.reportDeleteModalCtaClicked('Delete');
        props?.primaryButtonOnClick?.();
      },
      secondaryButtonOnClick: () => {
        this.biReporter?.reportDeleteModalCtaClicked('Cancel');
        props?.secondaryButtonOnClick?.();
      },
      onCloseButtonClick: (e) => {
        this.biReporter?.reportDeleteModalCtaClicked('X');
        props?.onCloseButtonClick?.(e);
      },
    });
  }

  onFadeStart() {
    if (this.fade === 'exit') {
      this.fade = 'exiting';
    }
  }

  onFadeDone() {
    const { fade } = this;
    if (fade === 'exiting') {
      this.fade = 'idle';
    }
  }

  setItemIfChanged(keyedItem: KeyedItem<T>) {
    if (this.keyedItem !== keyedItem) {
      this.keyedItem = keyedItem;
    }
  }
}