import type { Theme, Router } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue'
import './index.css';

// about Naive UI
import { App, defineComponent, h, inject, onMounted, watch, nextTick } from 'vue'
import { setup } from '@css-render/vue3-ssr'
import { NConfigProvider } from 'naive-ui'
import { useRoute } from 'vitepress'

// SDK
// import CasdoorPlugin, { SdkConfig } from './sdk/casdoor'
import casdoor from 'casdoor-vue-sdk'
import { 
  ServerUrl, 
  ClientId, 
  AppName, 
  OrganizationName,
  RedirectPath
} from '../plugins/casdoor/config'

// Component
import SseListener from './components/SseListener.vue'
import Waline from './components/Waline.vue'
import CasdoorCallback from './components/CasdoorCallback.vue'
import ParameterTable from './components/ParameterTable.vue'
import SimpleTable from './components/SimpleTable.vue'
import NormalTable from './components/NormalTable.vue'
import PdfViewer from './components/PdfViewer.vue'
import SecurePdfViewer from './components/SecurePdfViewer.vue'
import FilterComponent from './components/FilterComponent.vue'
import ExcalidrawView from './components/ExcalidrawView.vue';

const CssRenderStyle = defineComponent({
  setup() {
    const collect = inject<() => string>('css-render-collect')
    return {
      style: collect ? collect() : ''
    }
  },
  render() {
    return h('css-render-style', {
      innerHTML: this.style
    })
  }
})

const VitepressPath = defineComponent({
  setup() {
    const route = useRoute()
    return () => {
      return h('vitepress-path', null, [route.path])
    }
  }
})

const NaiveUIProvider = defineComponent({
  render() {
    return h(
      NConfigProvider,
      { abstract: true, inlineThemeDisabled: true },
      {
        default: () => [
          h(SseListener),  // <-- SSE 监听组件
          h(Layout, null, { default: this.$slots.default?.() }),
          import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null
        ]
      }
    )
  }
})

import mediumZoom from 'medium-zoom'
// import type { Zoom } from 'medium-zoom'
// let zoomInstance : Zoom | undefined = undefined

function pictureZoom() {
  const route = useRoute();
  const initZoom = () => {
    // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); // 默认
    // mediumZoom('.main img', { background: 'var(--vp-c-bg)' }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
    // 除a标签以下的所有图像都进行缩放
    // mediumZoom(':not(a) > img:not(.VPImage)', { background: 'var(--vp-c-bg)' }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
    mediumZoom('.VPDoc img', { background: 'var(--vp-c-bg)' });
  };
  onMounted(() => {
    initZoom();
  });
  watch(
    () => route.path,
    () => nextTick(() => initZoom())
  );
}

/** @type {import('vitepress').Theme} */
export default {
  Layout: NaiveUIProvider,
  enhanceApp({ app }: { app: App }) {
    if (import.meta.env.SSR) {
      const { collect } = setup(app)
      app.provide('css-render-collect', collect)
    }

    app.use(casdoor, {
      serverUrl: ServerUrl,
      clientId: ClientId,
      appName: AppName,
      organizationName: OrganizationName,
      redirectPath: RedirectPath
    })

    // 注册自定义全局组件
    // app.component('...', ...)
    app.component('SseListener', SseListener) // 全局监听SSE
    app.component('Waline', Waline) // 评率组件
    app.component('CasdoorCallback', CasdoorCallback)
    app.component('ParameterTable', ParameterTable)
    app.component('SimpleTable', SimpleTable)
    app.component('NormalTable', NormalTable)
    app.component('PdfViewer', PdfViewer)
    app.component('SecurePdfViewer', SecurePdfViewer)
    app.component('FilterComponent', FilterComponent)
    app.component('ExcalidrawView', ExcalidrawView)
  },
  setup() {
    pictureZoom()
  },
  extends: DefaultTheme
} satisfies Theme