<template>
  <main>
    <div v-if="$store.state.developerMode">
      <center>
        <h1>Experiments</h1>
        <p>Experiments are features that aren't ready to be public, but if you want to try them early, you can (expect bugs), experiments may require a refresh or a route change to take effect.</p>
        <div class="box">
          <h2>Dark Theme (Remote, Default: Light)</h2>
          <b-switch
            passive-type='is-warning'
            type='is-dark'
            false-value="light"
            true-value="dark"
            v-model="settings.experiments.theme"
            v-if="$store.state.developerMode">
            Toggle
          </b-switch>
        </div>
        <div class="box">
          <h2>Relationships (Local, Default: Disabled)</h2>
          <b-switch
            v-model="settings.experiments.relationships"
            v-if="$store.state.developerMode">
            Toggle
          </b-switch>
        </div>
        <div class="box">
          <h2>Teams (Local, Default: Disabled)</h2>
          <b-switch
            v-model="settings.experiments.teams"
            v-if="$store.state.developerMode">
            Toggle
          </b-switch>
        </div>
        <div class="box">
          <h2>Marketplace (Local, Default: Disabled)</h2>
          <b-switch
            v-model="settings.experiments.marketplace"
            v-if="$store.state.developerMode">
            Toggle
          </b-switch>
        </div>
        <div class="box">
          <h2>New Settings Redesign (Local, Default: Enabled)</h2>
          <b-switch
            v-model="settings.experiments.newsettings"
            v-if="$store.state.developerMode">
            Toggle
          </b-switch>
        </div>
        <b-button
          class='button is-info'
          :loading='settings.experiments.loading'
          @click='doBoth()'
        >
          Save experiment preferences
        </b-button>
      </center>
    </div>
    <div v-else>
      <center>
        <h2>Please enable Integration Developer Mode to gain access to experiments.</h2>
        <p>It's easy! Just go to Settings > General, flip the switch and save! </p>
      </center>
    </div>
  </main>
</template>
<script>
  import FancyTextarea from '../FancyTextarea'

  import AjaxErrorHandler from '../../assets/js/errorHandler'
  import logger from '../../assets/js/logger'

  export default {
    name: 'settingsExperiments',
    components: {
      // eslint-disable-next-line vue/no-unused-components
      FancyTextarea
    },
    data () {
      return {
        settings: {
          experiments: {
            theme: 'light',
            loading: false,
            error: '',
            relationships: false,
            wall: false,
            marketplace: false,
            teams: false,
            newsettings: true,
            local: []
          },
        }
      }
    },
    computed: {},
    methods: {
      capitalizeFirstLetter(value) {
        return value.toUpperCase()
      },
      doBoth() {
        this.saveExperiments()
        this.localExperiments()
      },
      localExperiments() {
        localStorage.setItem('experimentsStore', JSON.stringify({wall: this.settings.experiments.wall, theme: this.settings.experiments.theme, newsettings: this.settings.experiments.newsettings, relationships: this.settings.experiments.relationships, teams: this.settings.experiments.teams, marketplace: this.settings.experiments.marketplace}));
        this.setExperimentsStore()
      },
      saveExperiments() {
        this.settings.experiments.error = ''
        this.settings.experiments.loading = true

        this.axios
          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/experiments', {
            theme: this.settings.experiments.theme
          })
          .then(() => {
            this.settings.experiments.loading = false
            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
              .then(res => {
                this.$store.commit('setUsername', res.data.username)
                this.$store.commit('setEmail', res.data.email)
                this.$store.commit('setEmailVerified', res.data.emailVerified)
                this.$store.commit('setAdmin', res.data.admin)
                this.$store.commit('setDevMode', res.data.developerMode)
                this.$store.commit('setTheme', res.data.theme)
              })
          })
          .catch(e => {
            this.settings.experiments.loading = false
            AjaxErrorHandler(this.$store)(e)
          })
      }
    },
    created () {
      if (localStorage.getItem('experimentsStore')) {
        this.settings.experimentsTemp = JSON.parse(localStorage.getItem('experimentsStore'))
        this.settings.experiments = JSON.parse(localStorage.getItem('experimentsStore'))
        this.$store.commit('setExperimentsStore', this.settings.experimentsTemp)
      } else {
        console.log("No experimentsStore, forcing default experiments to avoid route failure.")
        localStorage.setItem('experimentsStore', JSON.stringify({wall: this.settings.experiments.wall, theme: this.settings.experiments.theme, relationships: this.settings.experiments.relationships, teams: this.settings.experiments.teams, marketplace: this.settings.experiments.marketplace, newsettings: this.settings.experiments.newsettings}));
        this.setExperimentsStore()
      }
      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
        .then(res => {
          this.$store.commit('setUsername', res.data.username)
          this.$store.commit('setEmail', res.data.email)
          this.$store.commit('setEmailVerified', res.data.emailVerified)
          this.$store.commit('setAdmin', res.data.admin)
          this.$store.commit('setDevMode', res.data.developerMode)
        })
      this.$store.dispatch('setTitle', 'Experiments')

      this.$nextTick(() => {
        this.axios
          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
          .then(res => {
            this.settings.experiments.theme = res.data.theme || ''
          })
      })

      logger('settingsGeneral')
    },
  }
</script>
