import React from 'react';
import { ModuleRegistry } from 'react-module-container';
import { observer } from 'mobx-react-lite';
import type { ExploreAppsState } from './ExploreAppsState';

function _ExploreAppsModal({ state }: { state: ExploreAppsState }) {
  if (!state.isModalOpen) {
    return null;
  }
  const InContextAppsModal = ModuleRegistry.component('in-context-apps-modal');
  return (
    <InContextAppsModal
      title={state.modalProps.title}
      subTitle={state.modalProps.subtitle}
      tagIds={[state.modalProps.tag]}
      origin="patterns-more-action"
      dataHook="explore-apps-modal"
      isOpen={state.isModalOpen}
      onClose={() => state.closeExploreAppsModal()}
      onInstallationSuccess={({ appId }: { appId: string }) =>
        state.onInstallationSuccess({ appId })
      }
    />
  );
}

export const ExploreAppsModal = observer(_ExploreAppsModal);