<template>
  <main>
    <div>
      <center>
        <h1>Privacy</h1>
        <br>
        <div>
          <h2>Opt out of user walls</h2>
          <b-switch
            type='is-info'
            v-model="privacy.wall"
          >
            Toggle
          </b-switch>
        </div>
        <br>
        <b-button
          class='button is-info'
          :loading='privacy.loading'
          @click='savePrivacy()'
        >
          Save privacy preferences
        </b-button>
      </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 {
      privacy: {
        wall: false,
        loading: false
      },
    }
  },
  computed: {},
  methods: {
    capitalizeFirstLetter(value) {
      return value.toUpperCase()
    },
    savePrivacy() {
      this.privacy.error = ''
      this.privacy.loading = true

      this.axios
        .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
          userWallOptOut: this.privacy.wall
        })
        .then(() => {
          this.privacy.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.privacy.loading = false
          AjaxErrorHandler(this.$store)(e)
        })
    }
  },
  created () {
    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.privacy.wall = res.data.userWallOptOut || ''
        })
        .catch(e => {
          AjaxErrorHandler(this.$store)(e)
        })
    })

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