import React from 'react';
import { ReportProps } from '@wix/fe-essentials/bi';
import { action, makeObservable, observable } from 'mobx';
import { wixPatternsAppWasInstalledSrc144Evid200 } from '@wix/bex-core/bi';
import { ExploreAppsModal } from './ExploreAppsModal';
import { RelatedApps } from '@wix/wix-ui-icons-common';

export interface ExploreAppsModalProps {
  title: string;
  subtitle: string;
  tag: string;
}

export interface ExploreAppsActionItem {
  biName: string;
  text: string;
  prefixIcon: JSX.Element;
  onClick: () => void;
  modalProps: ExploreAppsModalProps;
}

interface ExploreAppsStateParams {
  modalProps: ExploreAppsModalProps;
  reportBi: (reportProps: ReportProps) => void;
  translatedText: string;
}
export class ExploreAppsState {
  modalProps: ExploreAppsModalProps;
  moreActionsMenuItem: ExploreAppsActionItem;
  isModalOpen = false;
  reportBi = (_reportProps: ReportProps) => {};
  Modal: ({ state }: { state: ExploreAppsState }) => JSX.Element | null;

  constructor({
    modalProps,
    reportBi,
    translatedText,
  }: ExploreAppsStateParams) {
    this.modalProps = modalProps;
    this.moreActionsMenuItem = {
      biName: 'Explore Apps',
      text: translatedText,
      prefixIcon: <RelatedApps />,
      onClick: this.openExploreAppsModal.bind(this),
      modalProps,
    };
    this.reportBi = reportBi;
    this.Modal = ExploreAppsModal;
    makeObservable(this, {
      modalProps: observable.ref,
      moreActionsMenuItem: observable.ref,
      isModalOpen: observable,
      openExploreAppsModal: action,
      closeExploreAppsModal: action,
    });
  }

  openExploreAppsModal() {
    this.isModalOpen = true;
  }

  closeExploreAppsModal() {
    this.isModalOpen = false;
  }

  onInstallationSuccess({ appId }: { appId: string }) {
    this.reportBi(wixPatternsAppWasInstalledSrc144Evid200({ appId }));
  }
}