<template>
  <ion-content class="loc-content">

  	<ion-row padding>
      <h1>Input</h1>
  	  <p>The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.<br>It is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more <a href="https://ionicframework.com/docs/api/input">See full documentation.</a></p>
      <h1>Demo</h1>
	</ion-row>
	
    <!-- Edit Profile Form -->
    <ion-list>
    	<ion-item-divider></ion-item-divider>
    	<ion-item lines="none">
	    	<h1>Edit Profile</h1>
    	</ion-item>
    	<ion-item-divider></ion-item-divider>
    	<reco-input 
    		label="First Name" :value="firstName" type="text" inputmode="latin-name" :validity="firstNameValidity" 
    		help="Type your first name here."
    		v-on:change="($event) => firstName = $event" 
    		v-on:blur="saveFirstName()"
    	/>
    	<ion-item-divider></ion-item-divider>
    	<reco-input 
    		label="Last Name" :value="lastName" type="text" inputmode="latin-name" :validity="lastNameValidity" 
    		help="Type your last name here."
    		v-on:change="($event) => lastName = $event" 
    		v-on:blur="saveLastName()"
    	/>
    	<ion-item-divider></ion-item-divider>
    	<reco-input 
    		label="Phone Number" :value="phone" type="text" inputmode="tel" :validity="phoneValidity" 
    		help="Type your mobile phone number here."
    		v-on:change="($event) => phone = $event" 
    		v-on:blur="savePhone()"
    	/>
    	<ion-item-divider></ion-item-divider>
    	<reco-input 
    		label="Email Address" :value="email" type="text" inputmode="email" :validity="emailValidity" 
    		help="Type your email address here."
    		v-on:change="($event) => email = $event" 
    		v-on:blur="saveEmail()"
    	/>
    	<ion-item-divider></ion-item-divider>
    </ion-list>

  </ion-content>
</template>

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

export default {
	components: {
		RecoInput,
	},
	data() {
		return {
			firstName: "",
			firstNameValidity: {
				state: "empty",
				message: "",
			},
			lastName: "",
			lastNameValidity: {
				state: "empty",
				message: "",
			},
			phone: "",
			phoneValidity: {
				state: "empty",
				message: "",
			},
			email: "",
			emailValidity: {
				state: "empty",
				message: "",
			},
		};
	},
	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 has to be at least 3 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 has to be at least 3 characters long." }
			} else {
				this.lastNameValidity = { state: "valid", message: "" }
			}
		},
		phone() {
			if (this.phone.length == 0) {
				this.phoneValidity = { state: "empty", message: "" }
			} else if (!Validator.isMobilePhone(this.phone)) {
				this.phoneValidity = { state: "invalid", message: "Please provide a valid mobile phone number." }
			} else {
				this.phoneValidity = { state: "valid", message: "" }
			}
		},
		email() {
			if (this.email.length == 0) {
				this.emailValidity = { state: "empty", message: "" }
			} else if (!Validator.isEmail(this.email)) {
				this.emailValidity = { state: "invalid", message: "Please provide a valid email address." }
			} else {
				this.emailValidity = { state: "valid", message: "" }
			}
		},
	},
    methods: {
		saveFirstName() {
			console.log('Save: '+this.firstName);
		},
		saveLastName(event) {
			console.log('Save: '+this.lastName);
		},
		savePhone(event) {
			console.log('Save: '+this.phone);
		},
		saveEmail(event) {
			console.log('Save: '+this.email);
		}
	}
}
</script>
