import {
  createApp,
  ref,
  h,
  provide,
  inject,
  watchEffect,
  shallowRef
} from '/@modules/vue'
import { Layout } from '/@theme/index.js'

const PathSymbol = Symbol()

const App = {
  setup() {
    const path = ref(location.pathname)

    window.addEventListener(
      'click',
      (e) => {
        if (e.target.tagName === 'A') {
          const { href, target } = e.target
          if (
            target !== `_blank` &&
            href.startsWith(`${location.protocol}//${location.host}`)
          ) {
            e.preventDefault()
            // TODO save scroll position
            history.pushState(null, '', href)
            path.value = location.pathname
          }
        }
      },
      { capture: true }
    )

    window.addEventListener('popstate', (e) => {
      // TODO restore scroll position
      path.value = location.pathname
    })

    provide(PathSymbol, path)

    return () => h(Layout)
  }
}

const Default404 = () => '404 Not Found'

const Content = {
  setup() {
    const path = inject(PathSymbol)
    const comp = shallowRef()

    watchEffect(() => {
      let pagePath = path.value.replace(/\.html$/, '')
      if (pagePath.endsWith('/')) {
        pagePath += 'index'
      }

      // awlays force re-fetch content in dev
      import(`${pagePath}.md?t=${Date.now()}`)
        .then((m) => {
          comp.value = m.default
        })
        .catch((err) => {
          comp.value = Default404
        })
    })

    return () => (comp.value ? h(comp.value) : null)
  }
}

const app = createApp(App)

app.component('Content', Content)

app.mount('#app')