<template>
  <div id="general_settings_view" class="view general_settings_view-view">
    <div class="view-title">
      <h1>Settings</h1>
    </div>
    <div class="view-content">
      <div class="settings-container">
        <div class="general-setting-container">
          <div class="label">
            Site Name
          </div>
          <div class="input">
            <input type="text" v-model="siteName" />
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            Site Description
          </div>
          <div class="input">
            <textarea v-model="siteDescription"></textarea>
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            SEO Keywords
          </div>
          <div class="input">
            <input type="text" v-model="seoKeywords" />
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            SEO Robots
          </div>
          <div class="input">
            <input type="text" v-model="seoRobots" />
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            Google Analytics Tracking ID
          </div>
          <div class="input">
            <input type="text" v-model="googleAnalyticsTrackingID" />
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            Stackable URL
          </div>
          <div class="input">
            <input type="text" v-model="stackableURL" />
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            Stackable API Key
          </div>
          <div class="input">
            <input type="text" v-model="stackableAPIKey" />
          </div>
        </div>
        <div class="general-setting-container">
          <div class="label">
            Favicon
          </div>
          <div class="input">
            <image-selector v-model="favicon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { get, put } from '../helpers/api.js';
  
  export default {
    data() {
      return {
        siteName: null,
        siteDescription: null,
        seoKeywords: null,
        seoRobots: null,
        googleAnalyticsTrackingID: null,
        stackableURL: null,
        stackableAPIKey: null,
        favicon: null,
        typeMask: 2
      }
    },
    created() {
      this.initData();
    },
    computed: {
      isSaving: function() {
        return this.$store.state.actions.saving;
      },
      isDiscarding: function() {
        return this.$store.state.actions.discarding;
      }
    },
    watch: {
      isSaving: function(isSaving) {
        if (!!isSaving) {
          this.submit();
        }
      },
      isDiscarding: function(isDiscarding) {
        if (!!isDiscarding) {
          window.location.reload(true);
        }
      }
    },
    methods: {
      initData() {
        const self = this;
        get('buildable_settings/?type_mask=' + this.typeMask, window.jwtToken)
          .then( (res) => {
            if (!!res && !!res.data && !!res.data.settings) {
              res.data.settings.forEach( function(setting) {
                if (setting.slug === "site-name") {
                  self.siteName = setting.value;
                }
                else if (setting.slug === "site-description") {
                  self.siteDescription = setting.value;
                }
                else if (setting.slug === "seo-keywords") {
                  self.seoKeywords = setting.value;
                }
                else if (setting.slug === "seo-robots") {
                  self.seoRobots = setting.value;
                }
                else if (setting.slug === "google-analytics-tracking-id") {
                  self.googleAnalyticsTrackingID = setting.value;
                }
                else if (setting.slug === "stackable-url") {
                  self.stackableURL = setting.value;
                }
                else if (setting.slug === "stackable-api-key") {
                  self.stackableAPIKey = setting.value;
                }
                else if (setting.slug === "favicon") {
                  self.favicon = setting.value;
                }
              })
            }
          })
          .catch( (err) => {
            console.log(err);
          });
        
        this.$store.commit('getFiles');
      },
      submit() {
        const form_params = {
          settings: [
            { type_mask: this.typeMask, name: "Site Name", slug: "site-name", value: this.siteName },
            { type_mask: this.typeMask, name: "Site Description", slug: "site-description", value: this.siteDescription },
            { type_mask: this.typeMask, name: "SEO Keywords", slug: "seo-keywords", value: this.seoKeywords },
            { type_mask: this.typeMask, name: "SEO Robots", slug: "seo-robots", value: this.seoRobots },
            { type_mask: this.typeMask, name: "Google Analytics Tracking ID", slug: "google-analytics-tracking-id", value: this.googleAnalyticsTrackingID },
            { type_mask: this.typeMask, name: "Stackable URL", slug: "stackable-url", value: this.stackableURL },
            { type_mask: this.typeMask, name: "Stackable API Key", slug: "stackable-api-key", value: this.stackableAPIKey },
            { type_mask: this.typeMask, name: "Favicon", slug: "favicon", value: this.favicon },
          ],
          type_mask: this.typeMask
        };
        
        put('buildable_settings', form_params, window.jwtToken)
          .then( (res) => {
            console.log(res);
          })
          .catch( (err) => {
            console.log(err);
          });
        
        this.$store.commit("concludeSave");
      }
    }
  }
</script>