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

/**
 * Dependencies
 */

var debug = require('debug')('view:setting-options');
var attach = require('attach');
var View = require('view');

var optionFallbacks = {
  '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-off': ['Off', 'Désactivée'],
  'grid-on': ['On', 'Activées']
};

function fallbackTitle(key) {
  var values = optionFallbacks[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({
  name: 'setting-options',

  initialize: function(options) {
    this.model = options.model;
    this.l10n = options.l10n || document.l10n;
    this.on('destroy', this.onDestroy);
    attach(this.el, 'click', 'li', this.onOptionClick);
    attach(this.el, 'click', '.js-back', this.firer('click:back'));
    this.model.on('change:selected', this.onSelectedChange);
    debug('initialized');
  },

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

  onOptionClick: function(event, el) {
    var key = el.getAttribute('data-key');
    this.emit('click:option', key, this.model);
  },

  onSelectedChange: function(key) {
    var next = this.els[key];
    this.els.selected.classList.remove('selected');
    next.classList.add('selected');
    this.els.selected = next;
  },

  render: function() {
    var data = this.model.get();
    this.selectedKey = data.selected;
    this.el.innerHTML = this.template(data);
    this.els.ul = this.find('.js-list');

    // we need to pass a boolean flag indicating if the
    // options should be localized
    var localizable = data.optionsLocalizable === false ? false : true;
    data.options.forEach(this.renderOption.bind(this, localizable));

    // Clean up
    delete this.template;

    debug('rendered');
    return this;
  },

  renderOption: function(localizable, option) {
    var li = document.createElement('li');
    var isSelected = option.key === this.selectedKey;

    if (localizable) {
      li.setAttribute('data-l10n-id', option.title);
      this.l10n.formatValue(option.title).then((title) => {
        var visibleTitle = title || fallbackTitle(option.title);
        li.textContent = visibleTitle;
        li.setAttribute('aria-label', visibleTitle);
      });
    } else {
      li.textContent = option.title;
      li.setAttribute('aria-label', option.title);
    }
    li.setAttribute('data-key', option.key);
    // The settings options list is a listbox (list of actionable items) thus
    // each iteam must have an 'option' role.
    li.setAttribute('role', 'option');
    li.className = 'setting-option';
    li.dataset.icon = 'tick';
    this.els.ul.appendChild(li);
    this.els[option.key] = li;

    if (isSelected) {
      li.classList.add('selected');
      // Make sure selected semantics is conveyed to the screen reader.
      li.setAttribute('aria-selected', true);
      this.els.selected = li;
    }
  },

  template: function(data) {
    return '<div class="inner">' +
      '<div class="settings_header">' +
        '<div class="settings-back-btn js-back" ' +
          'data-icon="left" role="button" data-l10n-id="back-button"></div>' +
        '<h2 aria-level="1" class="settings_title" data-l10n-id="' +
          data.header + '"></h2>' +
      '</div>' +
      '<div class="settings_items">' +
        '<ul role="listbox" class="inner js-list"></ul>' +
      '</div>' +
    '</div>';
  }
});

});