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

/*
 ep:v-language:[state.obj]="'title'"
*/
export default (el: HTMLElement, binding: any) => {
  watchEffect(() => {
    const store = useStore()
    const language = store.language
    const { arg, value } = binding

    let content = ''

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

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

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

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