define(function(require, exports, module) {
'use strict';

/**
 * Dependencies
 */

var debug = require('debug')('view:setting');
var bind = require('lib/bind');
var View = require('view');

var settingFallbacks = {
  'self-timer': ['Self-Timer', 'Minuteur'],
  'self-timer-off': ['Off', 'Désactivé'],
  'self-timer-2-seconds': ['2 seconds', '2 secondes'],
  'self-timer-5-seconds': ['5 seconds', '5 secondes'],
  'self-timer-10-seconds': ['10 seconds', '10 secondes'],
  grid: ['Grid Lines', 'Quadrillage'],
  'grid-off': ['Off', 'Désactivée'],
  'grid-on': ['On', 'Activé']
};

function fallbackText(key) {
  var values = settingFallbacks[key];
  if (!values) { return key; }
  var locale = (document.documentElement.lang || navigator.language || 'en')
    .toLowerCase();
  return values[locale.indexOf('fr') === 0 ? 1 : 0];
}

/**
 * Exports
 */

module.exports = View.extend({
  tag: 'li',
  name: 'setting',

  initialize: function(options) {
    this.l10n = options.l10n || document.l10n;
    this.model = options.model;
    this.model.on('change', this.render);
    this.on('destroy', this.onDestroy);
    this.el.dataset.icon = this.model.get('icon');
    this.el.classList.add('test-' + this.model.get('title') + '-setting');
    bind(this.el, 'click', this.onClick);
  },

  onClick: function() {
    this.emit('click', this);
  },

  onDestroy: function() {
    this.model.off('change', this.render);
  },

  render: function() {
    var data = this.model.get();
    data.selected = this.model.selected();
    data.value = data.selected && data.selected.title;
    this.el.setAttribute('role', 'option');


    var localizedValue;
    if (data.optionsLocalizable === false) {
      localizedValue = Promise.resolve(data.value);
    } else {
      localizedValue = this.l10n.formatValue(data.value);
    }

    localizedValue.then(valueString => {
      valueString = valueString || fallbackText(data.value);
      this.l10n.setAttributes(
        this.el,
        'setting-option-' + data.title,
        { value: valueString }
      );
      this.el.innerHTML = this.template({
        titleL10n: 'data-l10n-id="' + data.title + '"',
        valueL10n: data.optionsLocalizable !== false ? 'data-l10n-id="' +
          data.value + '"' : '',
        valueText: data.optionsLocalizable === false ? data.value : '',
      });

      var title = this.el.querySelector('.setting_title');
      if (title && !title.textContent) {
        title.textContent = fallbackText(data.title);
      }
      var value = this.el.querySelector('.setting_value');
      if (value && !value.textContent) {
        value.textContent = valueString;
      }

      // Clean up
      delete this.template;

      debug('rendered (item %s)', data.key);
    });

    return this;
  },

  template: function(data) {
    return '<div class="setting_text">' +
      '<h4 class="setting_title" ' + data.titleL10n + '></h4>' +
      '<h5 class="setting_value" ' + data.valueL10n + '>' + 
        data.valueText +
      '</h5>' +
    '</div>';
  },
});

});