<template>
	<div class="dos-login-container" ref="qsnds">
		<h1>Create your own room !</h1>

		<StatusInput
		ref="loginField"
		v-model="login"
		placeholder="Login"
		:checkMethod="checkExisting">
		</StatusInput>

		<ConfirmedPassword v-model="c_password" @validation="createRoom"></ConfirmedPassword>

		<button class="dos-button dos-form-button" @click="createRoom" :disabled="!inputValid">Create</button>
	</div>
</template>

<script>

	import Rooms from '@/utils/rooms'
	import StatusInput from '@/components/InputWithStatus'
	import ConfirmedPassword from '@/components/ConfirmedPassword'

	export default {
		data: () => ({
			login: '',
			password: '',
			passConfirmed: false,
		}),
		methods: {
			createRoom() {
				Rooms.create(this.login, this.password).thenJSON(
					(val,obj) => this.processResponse(obj)
				)
			},
			processResponse(res) {
				if(res.status === 'ERROR') {
					return this.$refs.loginField.status.msg = res.text
				}
				Rooms.connect(this.login, this.password).then( () => this.$router.push('/room') )
			},
			checkExisting(login) {
				let to_return = { msg: '', color: 'red' }
				if(login === '') return to_return
				Rooms.exists(login).then( (val) => {
					if(val) return to_return.msg = 'This name is already in use !'
				});
				return to_return
			},
		},
		computed: {
			inputValid() {
				return ( this.login !== '' ) && ( this.passConfirmed )
			},
			c_password: {
				get: () => ({ password: this.password, confirmed: this.passConfirmed}),
				set(newValue) {
					this.password = newValue.password
					this.passConfirmed = newValue.confirmed
				}
			}
		},
		components: {
			StatusInput, ConfirmedPassword
		}
	}

</script>