import { useViewStack } from '@ibiz-template/mob-vue3-components';
import { routerCallback } from '@ibiz-template/vue3-util';
import { Modal, ViewMode } from '@ibiz-template/runtime';
import { defineComponent, onUnmounted, ref } from 'vue';
import './App.scss';

export default defineComponent({
  setup() {
    const { viewStack, on, off } = useViewStack();
    const transitionName = ref('forward');
    const onViewStackChange = (type: 'push' | 'pop') => {
      transitionName.value = type === 'push' ? 'forward' : 'back';
    };

    on('onBeforeStackChange', onViewStackChange);

    onUnmounted(() => {
      off('onBeforeStackChange', onViewStackChange);
    });

    const viewModals = new Map<string, Modal>();

    const getViewModal = (key: string) => {
      if (!viewModals.has(key)) {
        viewModals.set(
          key,
          new Modal({
            mode: ViewMode.ROUTE,
            viewUsage: 1,
            routeDepth: 1,
            dismiss: modal => {
              routerCallback.close(key, modal);
              ibiz.platform.back();
              viewModals.delete(key);
            },
          }),
        );
      }
      return viewModals.get(key);
    };

    return {
      viewStack,
      getViewModal,
      transitionName,
    };
  },
  render() {
    return (
      <iBizRouterView
        manualKey={this.viewStack.currentKey}
        modal={this.getViewModal(this.viewStack.currentKey)}
      >
        {({ Component }: { Component: string }) => {
          return (
            <iBizKeepAlive keyList={this.viewStack.cacheKeys}>
              {Component && <Component />}
            </iBizKeepAlive>
          );
        }}
      </iBizRouterView>
    );
  },
});