<template>
	<div>
		<v-card class="radius-10">
			<v-card-title>
				<span class="headline">{{ (action == 'edit') ? 'Edit User' : 'New User' }}</span>
			</v-card-title>
			<v-divider class="mb-2"></v-divider>
			<v-card-text class="py-4">
				<v-row dense>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.email"
							label="Email" placeholder="Email"
							dense
							:disabled="action == 'edit'"
							:error-messages="errors.email"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="4">
						<v-select
							v-model="form.role_id"
							label="Role Type"
							:items="roleTypes"
							dense
							:error-messages="errors.role_id"
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.full_name"
							label="Full Name" placeholder="Full Name"
							dense
							:error-messages="errors.full_name"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="4">
						<v-select
							v-model="form.gender"
							label="Gender"
							:items="genderTypes"
							dense
							:error-messages="errors.gender"
						></v-select>
					</v-col>
					<v-col v-if="isPartner" cols="12" md="12">
						<v-autocomplete
							v-model="form.partner_package_id"
							label="Partner Package" placeholder="Partner Package"
							dense
							:items="partnerPackages"
							item-value="id" item-text="name"
							:error-messages="errors.partner_package_id"
						></v-autocomplete>
					</v-col>
					<v-col v-if="isPartner" cols="12" md="12">
						<v-text-field
							v-model="form.commission_rate"
							label="Commission Rate" placeholder="Commission Rate"
							type="number" step="0.1" min="0"
							dense
							:error-messages="errors.commission_rate"
						></v-text-field>
					</v-col>
					<v-col v-if="isPartner" cols="12" md="12">
						<v-text-field
							v-model="form.company_name"
							label="Company Name" placeholder="Company Name"
							dense
							:error-messages="errors.company_name"
						></v-text-field>
					</v-col>
					<v-col v-if="isPartner" cols="12" md="12">
						<v-text-field
							v-model="form.business_reg_num"
							label="Business Registration Number" placeholder="Business Registration Number"
							dense
							:error-messages="errors.business_reg_num"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.address"
							label="Address" placeholder="Address"
							dense
							:error-messages="errors.address"
						></v-text-field>
					</v-col>
					<v-col cols="6" md="6">
						<v-text-field
							v-model="form.city"
							label="City" placeholder="City"
							dense
							:error-messages="errors.city"
						></v-text-field>
					</v-col>
					<v-col cols="6" md="6">
						<v-text-field
							v-model="form.postcode"
							label="Postcode" placeholder="Postcode"
							dense
							:error-messages="errors.postcode"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.state"
							label="State" placeholder="State"
							dense
							:items="state_list"
							item-value="name" item-text="name"
							:error-messages="errors.state"
						></v-autocomplete>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.mobile_num"
							label="Mobile Number" placeholder="Mobile Number"
							dense
							:error-messages="errors.mobile_num"
						></v-text-field>
					</v-col>
					<template v-if="action == 'edit' ">
						<v-col cols="12" md="auto">
							<v-btn 
								small outlined
								color="info"
								class="text-capitalize"
								@click="editPassword()"
							>
								<v-icon left small>mdi-lock</v-icon>
								Edit Password
							</v-btn>
						</v-col>
						<v-col cols="12" md="auto">
							<v-btn 
								small outlined
								color="error"
								class="text-capitalize"
								:loading="resetPassword_loading"
								@click="resetPassword()"
							>
								<v-icon left small>mdi-email</v-icon>
								Reset Password
							</v-btn>
						</v-col>
					</template>
					<template v-else>
						<v-checkbox
							v-model="form.send_email"
							label="Send Activation Email"
							dense
							class="ma-0"
						></v-checkbox>
					</template>
				</v-row>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn 
					color="blue darken-1" text title="Cancel" 
					@click="closeDialog()"
				>
					Cancel
				</v-btn>
				<v-btn 
					color="blue darken-1" 
					text title="Save" 
					:loading="submit_loading"
					@click="submitForm(form)"
				>
					Save
				</v-btn>
			</v-card-actions>
		</v-card>
		<v-dialog v-model="changePassword_dialog" max-width="550px" persistent>
			<UpdatePasswordForm :visible.sync="changePassword_dialog" :user-id="form.id"></UpdatePasswordForm>
		</v-dialog>
	</div>
</template>

<script>
import UpdatePasswordForm from './UpdatePasswordForm'
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	components:{
		UpdatePasswordForm
	},
	mixins: [ 
		errorHandlerMixin
	],
	props:{
		visible: {
			type: Boolean,
			required: true,
		},
		item: {
			type: Object,
			required: true,
			default: ()=>{
				return {}
			}
		},
		action: {
			type: String,
			required: true,
		},
		roleTypes:{
			type: Array,
			default: ()=>{
				return []
			}
		},
		genderTypes:{
			type: Array,
			default: ()=>{
				return []
			}
		},
		partnerPackages:{
			type: Array,
			default: ()=>{
				return []
			}
		},
	},
	data () {
		return {
			form : {},
			errors : {},
			submit_loading : false,
			changePassword_dialog: false,
			resetPassword_loading: false,
			state_list: [],
		}
	},
	computed:{
		isPartner()
		{
			return this.form.role_id == 2
		},
	},
	watch:{
		'item':{
			handler(){
				this.form = this.item
			},
			immediate: true,
		},
		'visible':{
			handler: function (newVal){
				if(newVal){
					if(this.action == "new"){
						this.form.send_email = true
					}
				}else{
					// reset
					this.form = {}
					this.errors = {}
				}
			},
			immediate : true,
		},
	},
	created(){
		this.init()
	},
	methods: {
		init(){
			this.getStateList()
		},
		initialize(){
			this.closeDialog()
			this.$emit('initialize')
		},
		closeDialog(){
			this.$emit('update:visible',false)
		},
		submitForm(item){
			this.saveModel(item)
		},
		saveModel(item){
			if(!this.isPartner)
			{
				item.partner_package_id = null
			}
			
			this.submit_loading = true
			this.errors = {}
			let payload = {
				id : item.id,
				full_name : item.full_name,
				email : item.email,
				gender : item.gender,
				partner_package_id : item.partner_package_id,
				commission_rate : item.commission_rate,
				company_name : item.company_name,
				business_reg_num : item.business_reg_num,
				address : item.address,
				postcode : item.postcode,
				city : item.city,
				state : item.state,
				mobile_num: item.mobile_num,
				role_id : item.role_id,
				password : item.password,
				password_confirmation : item.password_confirmation,
				send_email : item.send_email,
			}	
			let theApi = (this.action == "new") ? this.$api.createUser(payload) : this.$api.updateUser(payload)
			theApi.then((res)=>{
				this.$toast.success(res.data.message)
				this.initialize()
			}).catch((err) => {
				this.errors = this.errorHandler_(err,["full_name","email",'role_id','mobile_num','partner_package_id'])
			}).finally(()=>{
				this.submit_loading = false
			})
		},
		editPassword(){
			this.changePassword_dialog = true
		},
		resetPassword(){
			this.resetPassword_loading = true
			let payload = {
				id : this.form.id,
			}
			this.$api.helpResetPassword(payload).then((res)=>{
				this.$toast.success(res.data.message)
			}).catch((err) => {
				this.errorHandler_(err)
			}).finally(()=>{
				this.resetPassword_loading = false
			})
		},
		getStateList()
		{
			this.$api.getStateList().then(async (res)=>{
				let { result } = res.data
				this.state_list = result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		}
	}
}
</script>