import Vue from 'vue';
import Localization from 'zero/helpers/localization.js';

/// <summary>
/// Localizes the given property and sets the inner-text of the node to its result
/// </summary>
Vue.directive('localize', (el, binding) =>
{
  if (binding.value !== binding.oldValue || !el.innerText)
  {
    const hasValue = !!binding.value;
    const isObject = typeof binding.value === 'object';
    let key = hasValue ? (isObject ? binding.value.key : binding.value) : null;
    let options = hasValue && isObject ? binding.value : null;

    const result = hasValue ? Localization.localize(key, options) : '';

    // set content as html
    if (binding.arg === 'html')
    {
      el.innerHTML = result;
    }
    // set title
    else if (binding.arg === 'title')
    {
      el.title = result;
    }
    // set attribute
    else if (binding.arg)
    {
      el.setAttribute(binding.arg, result);
    }
    // set content as plain text
    else
    {
      el.innerText = result;
    }
  }
});