<link rel="import" href="settings-category.html">
<link rel="import" href="trendystore-setting.html">
<link rel="import" href="trendystore-setting-options.html">

<dom-module id="admin-settings-template">
  <template>
    <style>
      :root {
        --secondary-text-color: #FFF;
        --primary-text-color: #FFF;
      }
      :host {
        display: block;
      }
    </style>

    <settings-category title="Themes, layouts & branding"
      category="[[settings.styling]]"
      on-setting-change="_handleSettingsTap"
      on-selected-change="_updateTheme">
    </settings-category>

    <settings-category title="Upload options"
      category="[[settings.upload]]"
      on-setting-change="_handleSettingsTap">
    </settings-category>

    <settings-category title="security options"
      category="[[settings.security]]"
      on-setting-change="_handleSettingsTap">
    </settings-category>

    <settings-category title="configuration options"
      category="[[settings.config]]"
      on-setting-change="_handleSettingsTap"
      disabled>
    </settings-category>
  </template>
</dom-module>
<script>
Polymer({
  is: 'admin-settings-template',

  properties: {
    theme: {
      type: Object,
      notify: true
    },

    settings: {
      type: Object,
      notify: true
    },

    _settings: {
      type: Array,
      value: []
    }
  },

  attached: function() {
    this.api = Polymer.dom(document).querySelector('admin-api');
  },

  _handleSettingsTap: function() {
    var name = event.detail.name;
    var checked = event.detail.checked;

    switch (name) {
      case 'primary-color':
        return;
        // break;
      case 'logs':
        name = 'security/logs';
        if (checked) {
          this._checkIfNotified(this.settings, name);
        }
        break;
      case 'imgur-upload':
        this._checkIfNotified(this.settings, name);
        if (checked) {
          name = 'upload/imgur-upload';
          this.api.updateSettings('upload/firebase-upload', 'enabled', false);
          if (!this.settings['imgur-upload'].uid && this.settings['imgur-upload'].notified) {
            this.api.openDialog('#imgurKeyDialog');
          }
        }
        break;
      case 'firebase-upload':
        this._checkIfNotified(this.settings, name);
        if (checked) {
          name = 'upload/firebase-upload';
          this.api.updateSettings('upload/imgur-upload', 'enabled', false);
        }
        break;
      case 'app-title':
        name = 'styling/app-title';
        if (!this.settings.styling['app-title'].value) {
          this.api.updateSettings(name, 'editable', true);
          this.api.updateSettings(name, 'value', this.settings.config['app-name'].value);
        }
        break;
      case 'app-title-accent':
        name = 'styling/app-title-accent';
        if (!this.settings.styling['accented-text']) {
          this.api.updateSettings(name, 'editable', true);
          this.api.updateSettings(name, 'value', 'store');
        }
        break;
      case 'theme':
        name = 'styling/theme';
        this.api.updateSettings(name, 'selectable', true);
        this.api.updateSettings(name, 'value', this.settings.styling.theme.value);
        break;
      default:

    }

    this.api.updateSettings(name, 'enabled', checked);
  },

  _save: function() {
    console.log(Polymer.dom(event).rootTarget.dataHost);
    // var name = event.detail.name;
  },

  _checkIfNotified: function(settings, setting) {
    // dirty check, if the setting exists check if notified.
    if (settings[setting]) {
      if (!settings[setting].notified) {
        this._notified(settings, setting);
      }
      return;
    }
    this._notified(settings, setting);
  },

  _notified: function(settings, setting) {
    this.api.openDialog('#logAlert').then(function(closingReason) {
      if (closingReason === 'confirmed') {
        this.api.updateSettings(setting, 'notified', true);
        if (setting === 'imgurUpload' && !settings.imgur.uid) {
          this.api.openDialog('#imgurKeyDialog');
        }
      }
    }.bind(this));
  },

  _updateTheme: function(e) {
    this.api.updateSettings('styling/theme', 'value', e.detail);
  }
});
</script>
