<template>
	<div class='admin_forum_info category_widget__box'>
		<div class='category_widget__text'>
			<h2>Site settings</h2>
		</div>
		<div>
      <b-input v-model='bannerText' :error="errors.bannerText" placeholder='Banner text, (e.g: Kaverti is in beta)' maxlength="15"></b-input>
		</div>
		<loading-button :loading='loading' @click='save'>Save settings</loading-button>
	</div>
</template>

<script>
	import LoadingButton from './LoadingButton'

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

	export default {
		name: 'AdminForumInfo',
		components: {
			LoadingButton
		},
		data () {
			return {
				name: '',
				description: '',
				bannerEnabled: false,
				loading: false,
				errors: {
					bannerText: '',
				}
			}
		},
		methods: {
			save () {
				this.errors.bannerText = ''

				this.loading = true

				let settingsReq = this.axios.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state', {
					siteName: this.name,
					siteDesc: this.description || '',
					showDescription: this.showDescription
				})

				settingsReq.then(res => {
					this.loading = false

					this.$store.commit('setSettings', res.data)
				}).catch(e => {
					this.loading = false

					AjaxErrorHandler(this.$store)(e, (error, modalErrors) => {
						if(this.errors[error.path] !== undefined) {
							this.errors[error.path] = error.message
						} else {
							modalErrors.push(error.message)
						}
					})
				})
			}
		},
		mounted () {
			this.axios
				.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
				.then(res => {
					this.name = res.data.siteName || ''
					this.description = res.data.siteDesc || ''
					this.showDescription = res.data.showDescription
				})
				.catch(AjaxErrorHandler(this.$store))
		}
	}
</script>

<style lang='scss' scoped>
	@import '../assets/scss/variables.scss';

	.admin_forum_info {
		@at-root #{&}__label {
			display: flex;
			align-items: center;
			margin-bottom: 0.5rem;

			& > span {
				font-size: 0.9rem;
				margin-left: 0.5rem;
			}
		}
	}
</style>
