import type { UseHeadInput } from '@unhead/vue'

export default defineNuxtPlugin((nuxtApp) => {
  const { color, radius } = useShadcnTheme()
  const { headerHeight } = useProVariables()

  const themeClass = computed(() => `theme-${color.value}`)

  const variables = computed(
    () =>
      /* css */ `body.${themeClass.value}{--radius: ${radius.value}rem; --header-height: ${headerHeight.value}rem;}`,
  )

  if (import.meta.client) {
    watch(variables, () => {
      window.localStorage.setItem('pro-variables', variables.value)
    })
  }

  const headData: UseHeadInput<any> = {
    bodyAttrs: {
      class: () => themeClass.value,
    },
    style: [
      {
        innerHTML: () => variables.value,
        tagPriority: 100,
        id: 'shadcn-theme-variables',
      },
    ],
    script: [
      // 首屏抖动问题
      {
        innerHTML: /** @lang js */ `
          if (localStorage.getItem('shadcn-theme-color')){
            document.body.classList.add('theme-' + localStorage.getItem('shadcn-theme-color'))
          }
          if (localStorage.getItem('pro-variables')) {
            document.getElementById("shadcn-theme-variables").innerHTML = localStorage.getItem('pro-variables')
          }
        `.replace(/\s+/g, ' '),
        type: 'text/javascript',
        tagPriority: -1,
        tagPosition: 'bodyOpen',
      },
    ],
  }

  useHead(headData)
})