<template>
  <ion-content class="loc-content">
   	<ion-list class="loc-content">
    	<ion-item-divider class="loc-content"></ion-item-divider>
    	<ion-item lines="none" class="title">
	    	<h1>Setup Profile</h1>
    	</ion-item>
    	<ion-item-divider class="loc-content"></ion-item-divider>
    	<reco-input 
    		label="Surname" :value="firstName" type="text" inputmode="latin-name" :validity="firstNameValidity" 
    		explanation="Your surname will only be visible in chat conversations."
    		v-on:change="$event => firstName = $event" 
    	/>
    	<ion-item-divider class="loc-content mid-divider"></ion-item-divider>
    	<reco-input 
    		label="Family Name" :value="lastName" type="text" inputmode="latin-name" :validity="lastNameValidity" 
    		explanation="Your family name will not be visible without your permission."
    		v-on:change="$event => lastName = $event" 
    	/>
    	<ion-item-divider class="loc-content mid-divider"></ion-item-divider>
    	<reco-input 
    		label="Nickname" :value="nickname" type="text" inputmode="latin" :validity="nicknameValidity" 
    		explanation="Your nickname should be unique. It will be displayed on your public posts."
    		v-on:change="$event => nickname = $event" 
    	/>
    	<ion-item-divider class="loc-content mid-divider"></ion-item-divider>
    	<reco-input 
    		label="Phone Number" :value="phoneNumber" type="text" inputmode="tel" :validity="phoneNumberValidity" 
    		explanation="Your phone number will not be shared with anyone without your permission."
    		v-on:change="$event => phoneNumber = $event" 
    	/>
    	<ion-item-divider class="loc-content mid-divider"></ion-item-divider>

    	<ion-item lines="none">
	    	<ion-row class="loc-row" @click="() => {$refs.birthdayPicker.open()}">
		    	<ion-label position="stacked" class="loc-label"><span>Birthday</span></ion-label>
		    	<ion-text v-show="birthday ? false : true" class="loc-explanation-text">
		    		Your birthday or age will not be visible to anyone without your permission.
		    	</ion-text>
		    </ion-row>
	        <ion-datetime 
	        	v-show="birthday ? true : false"
	            ref="birthdayPicker" display-format="D MMM YYYY" :min="minBirthday" :max="maxBirthday"
	            :value="birthday" v-on:ionChange="$event => {birthday = $event.target.value}"
	        />
	        <ion-text v-if="birthdayValidity.state == 'invalid'" class="loc-text danger">{{birthdayValidity.message}}</ion-text>
		  	<ion-icon v-if="birthdayValidity.state == 'empty'" name="checkmark-circle" size="small" slot="end" color="medium"></ion-icon>
		  	<ion-icon v-if="birthdayValidity.state == 'invalid'" name="close-circle" size="small" slot="end" color="danger"></ion-icon>
		  	<ion-icon v-if="birthdayValidity.state == 'valid'" name="checkmark-circle" size="small" slot="end" color="success"></ion-icon>
	    </ion-item>

    	<ion-item-divider class="loc-content mid-divider"></ion-item-divider>
    	<ion-item lines="none" class="signup-item">
	    	<ion-button class="loc-button" :disabled="!this.isSubmittable" size="default" color="light" shape="round" slot="end" @click="onSubmit()">
		    	Next
		    </ion-button>
    	</ion-item>
    </ion-list>
  </ion-content>
</template>

<script lang="ts">
import RecoInput from '@/components/atomic/RecoInput.vue';
import moment from 'moment';
import Validator from 'validator';

export default {
	components: { RecoInput },
	data() {
		return {
			firstName: "",
			firstNameValidity: {
				state: "empty",
			},
			lastName: "",
			lastNameValidity: {
				state: "empty",
			},
			nickname: "",
			nicknameValidity: {
				state: "empty",
			},
			phoneNumber: "",
			phoneNumberValidity: {
				state: "empty",
			},
			birthday: null,
			birthdayValidity: {
				state: "empty",
			},
			maxBirthday: moment().subtract(18, "years").format('YYYY-MM-DDTHH:mmZ'),
			minBirthday: moment().subtract(160, "years").format('YYYY-MM-DDTHH:mmZ'),
		};
	},
	watch: {
		firstName() {
			if (this.firstName.length == 0) {
				this.firstNameValidity = { state: "empty", message: "" }
			} else if (this.firstName.length < 2) {
				this.firstNameValidity = { state: "invalid", message: "This field must be at least 2 characters long." }
			} else {
				this.firstNameValidity = { state: "valid", message: "" }
			}
		},
		lastName() {
			if (this.lastName.length == 0) {
				this.lastNameValidity = { state: "empty", message: "" }
			} else if (this.lastName.length < 2) {
				this.lastNameValidity = { state: "invalid", message: "This field must be at least 2 characters long." }
			} else {
				this.lastNameValidity = { state: "valid", message: "" }
			}
		},
		nickname() {
			if (this.nickname.length == 0) {
				this.nicknameValidity = { state: "empty", message: "" }
			} else if (this.nickname.length < 6 || this.nickname.length > 12) {
				this.nicknameValidity = { state: "invalid", message: "Your nickname must be at least 6 and maximum 12 characters long." }
			} else if (false /* check whether it is unique */) {
				this.nicknameValidity = { state: "invalid", message: "This nickname is already taken :(" }
			} else {
				this.nicknameValidity = { state: "valid", message: "" }
			}
		},
		phoneNumber() {
			if (this.phoneNumber.length == 0) {
				this.phoneNumberValidity = { state: "empty", message: "" }
			} else if (!Validator.isMobilePhone(this.phoneNumber)) {
				this.phoneNumberValidity = { state: "invalid", message: "Please provide a valid phone number." }
			} else {
				this.phoneNumberValidity = { state: "valid", message: "" }
			}
		},
		birthday() {
			console.log(this.birthday);
			if (this.birthday.length == 0) {
				this.birthdayValidity = { state: "empty", message: "" }
			} else if (!Validator.isBefore(this.birthday, this.maxBirthday)) {
				this.birthdayValidity = { state: "invalid", message: "Please provide a valid date." }
			} else {
				this.birthdayValidity = { state: "valid", message: "" }
			}
		},
	},
	computed: {
		isSubmittable() {
			let isFirstName = this.firstNameValidity.state == "valid";
			let isLastName = this.lastNameValidity.state == "valid";
			let isPhoneNumber = this.phoneNumberValidity.state == "valid";
			let isNickname = this.nicknameValidity.state == "valid";
			let isBirthday = this.birthdayValidity.state == "valid";
			return isFirstName && isLastName && isPhoneNumber && isNickname && isBirthday;
		}
	},
	methods: {
		onSubmit() {
			if (this.isSubmittable) {
				let profile = {
					first_name: this.firstName,
					last_name: this.lastName,
					phone_number: this.phoneNumber,
					nickname: this.nickname,
					birthday: this.birthday,
				}
				console.log(profile);
			}
		},
	},
}
</script>

<style scoped lang="css">
.loc-content {
	--background: #00aeeb;
}
.loc-row {
	padding-top: 9px;
}
.mid-divider {
	min-height: 20px;
}
.title {
	text-transform: uppercase;
	--background: #00aeeb;
}
.title h1 {
	color: #fff;
	font-size: 36px;
	font-weight: 300;
}
.loc-label p {
	font-size: 16px;
}
.signup-item {
	--background: #00aeeb;
}
.signup-item div {
	font-weight: 600;
	font-size: 16px;
	color: #fff;
}
.loc-button {
	--color: var(--reco-light-font-color) !important;
}
.loc-label {
    font-size: 14px;
    font-weight: 600;
}
.loc-label {
	display: inline-block;
	position: relative; 
	top: -3px;
	margin-right: 6px;
}
.loc-explanation-text {
    padding: 2px 0 7px 0;
    font-size: 13px;
    color: var(--reco-lighter-font-color);
    opacity: .8;
}
.loc-text {
	padding: 1px 0 8px 0;
	font-size: 13px;
	color: var(--reco-lighter-font-color);
}
.loc-text.danger {
	color: var(--ion-color-danger);
}
.loc-input-field {
	margin-bottom: 5px;
}
</style>
