text: /*global AutoTheme, Color, Navigation, Storage */
  
  (function(exports) {
    'use strict';
  
    var currentTheme = null;
    var currentSection = null;
    var currentKey = null;
  
    var groupName = null;
    var sectionName = null;
  
    var Edit = {
      panel: document.getElementById('edit'),
      header: document.querySelector('#edit gaia-header'),
      title: document.querySelector('#edit gaia-header h1'),
      list: document.querySelector('#edit-list'),
      editColor: document.querySelector('#edit-color'),
      picker: document.querySelector('#edit-color gaia-color-picker'),
      iframe: document.querySelector('#edit iframe'),
      autotheme: document.querySelector('#edit-color .autotheme-palette'),
  
      prepareForDisplay: function(params) {
        var defer = new Defer();
  
        currentTheme = params.theme;
  
        this.title.textContent = params.group + ' / ' + params.section;
        this.header.setAttr('action', 'back');
        AutoTheme.showPalette(this.autotheme);
  
        this.picker.addEventListener('change', this.onPickerChange.bind(this));
  
        var currentList = this.list.querySelector('gaia-list');
        if (currentList) {
          this.list.removeChild(currentList);
        }
  
        var list = document.createElement('gaia-list');
        currentSection = currentTheme.groups[params.group][params.section];
  
        groupName = params.group;
        sectionName = params.section;
  
        this.iframe.src = params.section + '-preview.html';
        this.iframe.onload = () => {
          Object.keys(currentSection).forEach((key) => {
            var body = this.iframe.contentDocument.body;
            body.style.setProperty(key, currentSection[key]);
          });
  
          defer.resolve();
        };
  
        Object.keys(currentSection).forEach((key) => {
          var link = document.createElement('a');
          link.classList.add('edit');
          link.dataset.key = key;
  
          var label = document.createElement('label');
          label.classList.add('l-flex');
          label.classList.add('l-flex-grow');
  
          var title = document.createElement('h3');
          title.textContent = key;
          label.appendChild(title);
  
          link.appendChild(label);
  
          var valueElt = document.createElement('div');
          var value = currentSection[key];
          valueElt.setAttribute('aria-label', value);
          valueElt.dataset.id = key;
          valueElt.className = 'palette-item';
          valueElt.style.backgroundColor = value;
  
          link.appendChild(valueElt);
  
          list.appendChild(link);
        });
  
        this.list.appendChild(list);
        this.list.scrollTop = 0;
  
        return defer.promise.then(() => this.panel);
      },
  
      pick: function(key) {
        currentKey = key;
        this.picker.value = currentSection[key];
        this.editColor.classList.add('editing');
        this.picker.resize();
      },
  
      onPickerChange() {
        if (!currentKey) {
          return;
        }
        var value = this.picker.value;
        this.iframe.contentDocument.body.style.setProperty(currentKey, value);
      }
    };
  
    Edit.header.addEventListener('action', function(evt) {
      if (evt.detail.type != 'back') {
        return;
      }
  
      Navigation.pop();
    });
  
    Edit.panel.addEventListener('click', function(evt) {
      var target = evt.target;
      if (!target.classList.contains('edit')) {
        return;
      }
  
      Edit.pick(target.dataset.key);
    });
  
    Edit.panel.addEventListener('Navigation:pop', function onPop() {
      Edit.editColor.classList.remove('editing');
      Edit.iframe.src = '';
    });
  
    Edit.editColor.addEventListener('click', function(evt) {
      var target = evt.target;
      var value;
  
      if (target.classList.contains('save')) {
        if (!currentKey) {
          return;
        }
  
        value = Edit.picker.value;
        currentSection[currentKey] = value;
  
        var elem = Edit.list.querySelector('[data-id=' + currentKey + ']');
        elem.setAttribute('aria-label', value);
        elem.style.backgroundColor = value;
  
        Storage.updateTheme(currentTheme)
          .then(() => {
            Edit.editColor.classList.remove('editing');
            currentKey = null;
          })
          .then(() => {
            if (!currentTheme.manifestURL) {
              return Promise.resolve();
            }
  
            // Updating the installed theme
            return Generation.installTheme(currentTheme.id, false)
                   .then(Storage.fetchTheme.bind(null, currentTheme.id))
                   .then((theme) => {
                     // Refresh
                     currentTheme = theme;
                     currentSection =
                       currentTheme.groups[groupName][sectionName];
                   });
          })
          .catch(function(error) {
            console.log(error);
          });
  
        return;
      }
  
      if (!target.classList.contains('cancel')) {
        return;
      }
  
      if (currentKey) {
        value = currentSection[currentKey];
        Edit.iframe.contentDocument.body.style.setProperty(currentKey, value);
      }
  
      Edit.editColor.classList.remove('editing');
      currentKey = null;
    });
  
    Edit.autotheme.addEventListener('click', function(e) {
      if (!e.target.classList.contains('palette-item')) {
        return;
      }
  
      var color = Color.fromJSONString(e.target.dataset.color);
      Edit.picker.value = color.toHexString();
      Edit.onPickerChange();
    });
  
    exports.Edit = Edit;
  })(window);
  