<template>
  <main>
    <div>
      <center>
        <h1>Privacy</h1>
        <br>
        <div>
          <h2>Team Wall opt out</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 + '/' + 'teams/admin/modify/' + this.$route.params.username, {
          userWallOptOut: this.privacy.wall
        })
        .then(() => {
          this.privacy.loading = false
        })
        .catch(e => {
          this.privacy.loading = false
          AjaxErrorHandler(this.$store)(e)
        })
    }
  },
  created () {
    this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/view/' + this.$route.params.username)
      .then(res => {
        if (res.data.userWallOptOut) {
          this.privacy.wall = res.data.userWallOptOut || ''
        }
      })
    this.$store.dispatch('setTitle', 'Team Privacy')

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