import { SessionManager } from '@stack-spot/auth-react'
import { CitronNavigator } from '@stack-spot/citron-navigator'
import { ExtensionOperations } from '@stack-spot/portal-extension-commons'
import { overlay } from '@stack-spot/portal-layout'
import { Extension } from './Extension'
import { extensionMenu } from './extension-menu'
import { handleNetworkOperation } from './network-handler'

interface Options<T extends keyof ExtensionOperations> {
  operation: T,
  variables: ExtensionOperations[T]['request'],
  apiUrl: string,
  slug: string,
  version?: string,
}

type OperationHandler = {
  [Key in keyof ExtensionOperations]: (
    options: Options<Key>, source: string, onSubmit?: (data: Record<string, any>) => void, onCancel?: () => void
  ) => ExtensionOperations[Key]['response'] | Promise<ExtensionOperations[Key]['response']>
}

const operationHandler: OperationHandler = {
  showModal: ({ variables: { path, ...variables }, slug, version }) => overlay.showModal({
    children: (
      <div style={{ maxHeight: 'calc(100vh - 250px)', overflow: 'auto' }}>
        <Extension slug={slug} version={version} path={path} style={{ width: '100%' }} />
      </div>
    ),
    ...variables,
  }),
  showRightPanel: ({ variables: { path, ...variables }, slug, version }) => overlay.showRightPanel({
    children: <Extension slug={slug} version={version} path={path} />,
    ...variables,
  }),
  showCustomModal: ({ variables: { path, ...variables }, slug, version }) =>
    overlay.showCustomModal(
      <Extension slug={slug} version={version} path={path} />,
      variables,
    ),
  showCustomRightPanel: ({ variables: { path, ...variables }, slug, version }) =>
    overlay.showCustomRightPanel(
      <Extension slug={slug} version={version} path={path} />,
      variables,
    ),
  closeModal: () => overlay.closeModal(),
  closeRightPanel: () => overlay.closeRightPanel(),
  alert: ({ variables }) => overlay.alert(variables as any),
  confirm: ({ variables }) => overlay.confirm(variables as any),
  getExtensionSlug: ({ slug }) => slug,
  getExtensionVersion: ({ version }) => version,
  getUserData: () => {
    const { name = '', email = '' } = SessionManager.instance?.getSession()?.getTokenData() ?? {}
    return { name, email }
  },
  showMenu: ({ variables }, source) => {
    if (extensionMenu.controlledBy && source.startsWith(extensionMenu.controlledBy.url)) extensionMenu.set(variables)
  },
  closeMenu: (_, source) => {
    if (extensionMenu.controlledBy && source.startsWith(extensionMenu.controlledBy.url)) extensionMenu.set(undefined)
  },
  showToaster: ({ variables }) => {
    overlay.showToaster(variables)
  },
  getCurrentPage: () => {
    const key = CitronNavigator.instance?.currentRoute?.$key ?? ''
    const params = CitronNavigator.instance?.currentParams ?? {}
    return { key, params }
  },
  network: ({ variables }) => handleNetworkOperation(variables),
  submit: ({ variables }, _, onSubmit) => onSubmit?.(variables),
  cancel: (_, __, ___, onCancel) => onCancel?.(),
}

export function handleOperation<T extends keyof ExtensionOperations>(
  options: Options<T>,
  source: string,
  onSubmit?: (data: Record<string, any>) => void,
  onCancel?: () => void,
): ExtensionOperations[T]['response'] | Promise<ExtensionOperations[T]['response']> {
  return operationHandler[options.operation](options, source, onSubmit, onCancel)
}