<template>
	<div class="auth-box__content">
		<div class="auth-box__prominent">
			<div class="auth-box__prominent-inner">
				<zoom-x-transition>
					<section
						v-if="!isSigningUp"
						key="authenticate"
						class="auth-box__view"
					>
						<h1 class="auth-box__title">
							{{ $t("SIGNIN_WELCOME") }}
						</h1>
						<w-form class="auth-box__form">
							<section>
								<w-input
									v-model="identity"
									class="auth-box__input"
									:placeholder="$t('SIGNIN_USERNAME')"
									autocomplete="sign-in email"
									round
								/>
								<w-input
									v-model="password"
									class="auth-box__input"
									:placeholder="$t('SIGNIN_PASSWORD')"
									autocomplete="sign-in password"
									type="password"
									round
								/>
							</section>
							<div class="auth-box__remember">
								<w-checkbox
									v-model="remember"
									:label="$t('SIGNIN_REMEMBER_ME')"
									round
								/>
								<VindiSpacer />
								<a class="auth-box__forgot" href="">
									{{ $t("SIGNIN_FORGOT_PASSWORD") }}
								</a>
							</div>
							<VindiSpacer />
							<w-button
								round
								color="white"
								class="auth-box__button"
								bg-color="secondary"
								type="submit"
								width="100%"
								height="32"
								:loading="loading"
								@click="authenticate"
							>
								{{ $t("SIGNIN_SIGNIN") }}
								<w-icon>
									mdi mdi-chevron-right
								</w-icon>
							</w-button>
						</w-form>
						<div
							v-if="canRegister"
							class="auth-box__toggle"
							@click="isSigningUp = true"
						>
							<div v-html="$t('SIGNIN_NO_ACCOUNT')" />
						</div>
					</section>
					<section
						v-else
						key="register"
						class="auth-box__view"
					>
						<h1 class="auth-box__title py4 font-semibold">
							{{ $t("SIGNIN_SIGNUP") }}
						</h1>
						<w-form class="auth-box__form">
							<section>
								<w-input
									v-model="email"
									class="auth-box__input"
									:placeholder="$t('GENERAL_EMAIL')"
									autocomplete="sign-up email"
									name="email"
									round
								/>
								<w-input
									v-model="fullname"
									class="auth-box__input"
									:placeholder="$t('GENERAL_FULL_NAME')"
									autocomplete="sign-up name"
									name="name"
									round
								/>
								<w-input
									v-model="password"
									class="auth-box__input"
									:placeholder="$t('SIGNIN_PASSWORD')"
									autocomplete="sign-up password"
									password-reveal
									type="password"
									name="password"
									round
								/>
							</section>
							<div class="auth-box__remember">
								<w-checkbox
									v-model="remember"
									:label="$t('SIGNIN_REMEMBER_ME')"
									round
								/>
							</div>
							<VindiSpacer />
							<w-button
								round
								color="white"
								class="auth-box__button"
								bg-color="secondary"
								type="submit"
								width="100%"
								height="32"
								:loading="loading"
								@click="register"
							>
								{{ $t("SIGNIN_REGISTER_ACCOUNT") }}
								<w-icon>
									mdi mdi-chevron-right
								</w-icon>
							</w-button>
						</w-form>
						<div
							class="auth-box__toggle"
							@click="isSigningUp = false"
						>
							<div v-html="$t('SIGNIN_HAVE_ACCOUNT')" />
						</div>
					</section>
				</zoom-x-transition>
			</div>
		</div>
		<div class="auth-box__flat">
			<div class="auth-box__flat-inner">
				<img :src="require('~/assets/img/login-illustration.svg')">
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	layout: 'landing',
	middleware: 'guest',

	data: () => ({
		isSigningUp: false,
		fullname: "",
		email: "",
		identity: "",
		password: "",
		remember: false,
		loading: false,
	}),

	computed: {
		canRegister() {
			return this.$store.state.config.allowRegister;
		},
	},

	methods: {

		async authenticate() {
			if (!this.identity || !this.password) {
				this.$waveui.notify(this.$t('NOTIFICATION_BLANK_FIELDS'), "error");
				return;
			}

			this.loading = true;

			const profile = await this.$store.dispatch("signIn", {
				identity: this.identity,
				password: this.password,
				remember: this.remember,
			});

			const authError = this.$store.state.authError;

			if(authError != '') {
				this.$waveui.notify({
					message: authError, 
					error: true
				});

				this.$store.commit('setAuthError', '');
			} else {
				if (!profile) {
					this.$waveui.notify(this.$t("NOTIFICATION_INVALID_DETAILS"), "error");
				} else {
					this.$router.push('/');
				}
			}

			this.loading = false;
		},

		async register() {
			if (!this.fullname || !this.email || !this.password) {
				this.$waveui.notify(this.$t('NOTIFICATION_BLANK_FIELDS'), "error");
				return;
			}
			
			this.loading = true;

			const profile = await this.$store.dispatch("signUp", {
				fullname: this.fullname,
				email: this.email,
				password: this.password,
				remember: this.remember,
			});

			if (!profile) {
				this.$waveui.notify(this.$t('NOTIFICATION_INVALID_DETAILS'), "error");
			} else {
				this.$router.push('/authenticate/complete');
			}

			this.loading = false;
		}

	}
});
</script>

<style lang="scss">
.auth-box {
	&__content {
		display: flex;
	}

	&__prominent {
		@include glow(rgba(0, 131, 253, 0.8));
		@include rounded('2xl');
		@include padding(8, x);
		@include padding(4, y);

		flex: 1;
		width: 50%;
		z-index: 2;
		text-align: center;
		background: linear-gradient(
			135deg,
			rgb(2, 198, 255) 0%,
			rgb(105, 67, 255) 100%
		);

		@include dark {
			@include glow(rgba(0, 131, 253, 0.45));
		}

		&-inner {
			position: relative;
			height: 100%;
		}
	}

	&__flat {
		@include glow(rgba(185, 185, 185, 0.8));
		@include rounded('2xl');
		@include padding(8, x);
		@include padding(4, y);

		flex: 1;
		width: 50%;
		margin-left: -1.5rem;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		background-color: white;
		display: none;

		@include breakpoint(md) {
			display: block;
		}

		@include dark {
			@include glow(rgba(129, 129, 129, 0.8));
		}

		&-inner {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 80%;
			}
		}
	}

	&__prominent, &__flat {
		height: 25rem;
	}

	&__view {
		position: absolute;
		flex-direction: column;
		color: white;
		display: flex;
		inset: 0;
	}

	&__title {
		@include padding(3, y);
		@include font-weight(semibold);
		@include font-size('2xl');

		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	&__form {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	&__input {
		@include margin(5, y);
	}

	&__remember {
		display: flex;

		:not(:checked)~.w-checkbox__input::after {
			border-color: white;
		}
	}

	&__forgot {
		color: inherit;
	}

	&__toggle {
		@include padding(4, t);
		@include font-weight(light);
		@include font-size(sm);

		user-select: none;
		cursor: pointer;
	}
}
</style>