import { watchEffect, DirectiveBinding } from 'vue'
import { useStore } from '@/store'
import { chineseLanguageLoader } from '@/i18n/util'

/*
 ep:v-language:title="state.obj"
*/

export default (el: HTMLElement, binding: DirectiveBinding) => {
  watchEffect(() => {
    const store = useStore()
    const language = store.language
    const { arg, value } = binding

    let content = ''

    if (!Object.keys(value)?.length || !arg) {
      return
    }

    if (language === 'zh') {
      content = value[arg]
    }

    if (language === 'en' && value[arg + 'En']) {
      content = value[arg + 'En']
    } else if (language === 'en' && !value[arg + 'En']) {
      content = value[arg]
    }

    if (language === 'tw') {
      content = chineseLanguageLoader(value[arg])
    }
    el.innerHTML = content
  })
}