<template>
  <div id="super_admin_settings_view" class="view general_settings_view-view">
    <div class="view-title">
      <h1>Super Admin Settings</h1>
    </div>
    <div class="view-content">
      <div class="settings-container">
        <div class="super-admin-setting-container">
          <div class="label">
           Buildable JSON
          </div>
          <div class="input">
            <textarea v-model="buildableJSON"></textarea>
          </div>
        </div>
        <div class="super-admin-setting-container">
          <div class="label">
            Updates
          </div>
          <div class="input">
            <div class="version">Version NUMBER</div>
            <div class="last-updated">Last updated on DATE at TIME</div>
            <a class="button dark-gray">Look for Updates</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { get, put } from '../helpers/api.js';
  
  export default {
    data() {
      return {
        buildableJSON: null,
        typeMask: 4
      }
    },
    created() {
      this.initData();
    },
    computed: {
      isSaving: function() {
        return this.$store.state.actions.saving;
      }
    },
    watch: {
      isSaving: function (isSaving) {
        if (!!isSaving) {
          this.submit();
        }
      }
    },
    methods: {
      initData() {
        get('buildable_settings/?type_mask=' + this.typeMask, window.jwtToken)
          .then( (res) => {
            console.log(res);
            if (!!res && !!res.data && !!res.data.settings) {
              let buildableJsonSetting = res.data.settings.find( function(setting) {
                return setting.slug === "buildable-json"
              });
              
              this.buildableJSON = (!!buildableJsonSetting) ? buildableJsonSetting.value : null;
            }
          })
          .catch( (err) => {
            console.log(err);
          });
      },
      isValidJson(str) {
        try {
          JSON.parse(str);
        } catch (e) {
          return false;
        }
        return true;
      },
      submit() {
        console.log("Saving.....");
        if (!this.isValidJson(this.buildableJSON)) {
          console.log("invalid JSON!");
          return;
        }
        
        const form_params = {
          settings: [
            {
              type_mask: 4,
              name: "Buildable JSON",
              slug: "buildable-json",
              value: this.buildableJSON
            }
          ],
          type_mask: this.typeMask
        };
        
        put('buildable_settings', form_params, window.jwtToken)
          .then( (res) => {
            if (!!res && !!res.data && !!res.data.settings) {
              let buildableJsonSetting = res.data.settings.find( function(setting) {
                return setting.slug === "buildable-json"
              });

              this.buildableJSON = (!!buildableJsonSetting) ? buildableJsonSetting.value : null;
            }
          })
          .catch( (err) => {
            console.log(err);
          });
        
        this.$store.commit('concludeSave');
      }
    }
  }
</script>