import DefaultTheme from 'vitepress/theme'
import mediumZoom from 'medium-zoom'
import { onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vitepress'

import './style/print.css'
import './style/zoom.css'

export default {
  ...DefaultTheme,

  setup() {
    const route = useRoute()

    const initZoom = () => {
      mediumZoom('.main img', {
        background: 'rgba(0,0,0,0.8)'
      })
    }

    onMounted(() => {
      nextTick(() => {
        initZoom()
      })
    })

    watch(
      () => route.path,
      () => {
        nextTick(() => {
          initZoom()
        })
      }
    )
  }
}