define([
    'require',
    'exports',
    'module',
    'debug',
    'attach',
    'view'
], function (require, exports, module) {
    'use strict';
    var debug = require('debug')('view:setting-options');
    var attach = require('attach');
    var View = require('view');
    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');
            var localizable = data.optionsLocalizable === false ? false : true;
            data.options.forEach(this.renderOption.bind(this, localizable));
            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 => {
                    li.setAttribute('aria-label', title);
                });
            } else {
                li.textContent = option.title;
                li.setAttribute('aria-label', option.title);
            }
            li.setAttribute('data-key', option.key);
            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');
                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>';
        }
    });
});