<style>
  mini-br {
    border-width: 1px;
  }
</style>
<template>
	<div class='route_container'>
		<h1>General settings</h1>
		<div>
    <h2>About me</h2>
			<h4>
				Description
			</h4>
			<b-input type="textarea"
				:placeholder='"Hi, I am " + $store.state.username'
        maxlength="256"
				v-model='description.value'
				:error='description.error'
			></b-input>
			<b-button
				class='button is-info'
				:loading='description.loading'
				@click='saveDescription'
			>
				Save description
			</b-button>
		</div>
    <div>
      <h2>Preferences</h2>
      <b-switch class="is-info" v-model="preferences.developerMode">Developer Mode and get beta features first</b-switch><br>
      <b-button
        class='button is-info'
        :loading='preferences.loading'
        @click='savePreferences'
      >
        Save preferences
      </b-button>
    </div>
	</div>
</template>

<script>
	import FancyTextarea from '../FancyTextarea'

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

	export default {
		name: 'settingsGeneral',
		components: {
      // eslint-disable-next-line vue/no-unused-components
			FancyTextarea
		},
		data () {
			return {
				description: {
					value: '',
					loading: false,
					error: ''
				},
        preferences: {
          theme: '',
          developerMode: '',
          loading: false,
          error: ''
        },
			}
		},
		computed: {},
		methods: {
      capitalizeFirstLetter(value) {
        return value.toUpperCase()
      },
      saveDescription() {
        this.description.error = ''
        this.description.loading = true

        this.axios
          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
            description: this.description.value
          })
          .then(() => {
            this.description.loading = false
          })
          .catch(e => {
            this.description.loading = false
            AjaxErrorHandler(this.$store)(e)
          })
      },
      savePreferences() {
        this.preferences.error = ''
        this.preferences.loading = true

        this.axios
          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
            developerMode: this.preferences.developerMode
          })
          .then(() => {
            this.preferences.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)
              })
          })
          .catch(e => {
            this.preferences.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', 'General Settings')

			this.$nextTick(() => {
				this.axios
					.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
					.then(res => {
						this.description.value = res.data.description || ''
            this.preferences.developerMode = res.data.developerMode
            this.preferences.theme = res.data.theme || ''
					})
					.catch(e => {
						AjaxErrorHandler(this.$store)(e)
					})
			})

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