<template>
	<div>
		<v-card class="radius-10">
			<v-card-title>
				<span class="headline">{{ (action == 'edit') ? 'Edit Locker' : 'New Locker' }}</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.name"
							label="Name" placeholder="Name"
							dense
							counter="20"
							:error-messages="errors.name"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.terminal_id"
							label="Terminal ID" placeholder="Terminal ID"
							dense
							:error-messages="errors.terminal_id"
						></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.city"
							label="City" placeholder="City"
							dense
							:error-messages="errors.city"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.pos_code"
							label="Postal Code" placeholder="Postal Code"
							dense
							:error-messages="errors.pos_code"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-textarea
							v-model="form.address"
							label="Display Address" placeholder="Display Address"
							dense outlined
							rows="2"
							counter="100"
							:error-messages="errors.address"
						></v-textarea>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							:value="location_text"
							label="GPS Location" placeholder="GPS Location"
							dense
							readonly
							@click="location_dialog = true"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.available_box_types"
							label="Available Box Types" placeholder="Available Box Types"
							dense
							multiple chips small-chips
							:items="box_types_items"
							item-value="id" item-text="title"
							:loading="box_types_loading"
							:search-input.sync="box_types_search"
							:error-messages="errors.available_box_types"
						></v-autocomplete>
					</v-col>
					<template v-if="true">
						<v-col cols="12" md="auto" class="body-2">
							Manage by: 
							<span v-if="form.partner">{{ form.partner.full_name }}</span>
							<span v-else class="font-italic">-Unsigned-</span>
							<v-btn
								v-if="[99,98].includes($auth.user().role_id)"
								rounded outlined small
								color="info"
								class="text-capitalize ml-2"
								:loading="partner_loading"
								@click="user_picker_dialog = true"
							>
								<v-icon small left>mdi-pencil</v-icon>Edit
							</v-btn>
							<WUserPicker
								v-model="form.partner"
								:visible.sync="user_picker_dialog"
								:search-payload="{
									role_id : 2
								}"
								@input="assignLockerPartner()"
							></WUserPicker>
						</v-col>
					</template>
				</v-row>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn 
					v-if="form.id"
					color="blue darken-1" text title="Clear Terminal Id" 
					@click="clearTerminalId(form)"
				>
					Clear Terminal Id
				</v-btn>
				<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="location_dialog" max-width="550px" persistent>
			<WLocationPicker
				v-model="form.location" 
				:visible.sync="location_dialog"
			></WLocationPicker>
		</v-dialog>
	</div>
</template>

<script>
import WLocationPicker from "@components/WLocationPicker"
import WUserPicker from "@components/WUserPicker"
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	components:{
		WLocationPicker,
		WUserPicker,
	},
	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 []
			}
		}
	},
	data () {
		return {
			form : {},
			errors : {},
			submit_loading : false,
			box_types_search: null,
			box_types_items: [],
			box_types_loading: false,
			location_dialog: false,
			user_picker_dialog: false,
			partner_loading : false,
			state_list: []
		}
	},
	computed:{
		location_text(){
			if(this.form.location){
				return this.form.location.lat+', '+this.form.location.lng
			}
			return null
		}
	},
	watch:{
		'item':{
			handler(){
				this.form = this.item
				if( this.form.longitude != 0 ){
					this.form.location = {
						lat : this.form.latitude,
						lng : this.form.longitude
					}
				}
			},
			immediate: true,
		},
		'visible':{
			handler: function (newVal){
				if(!newVal){
					// reset
					this.form = {}
					this.errors = {}
				}
			},
			immediate : true,
		},
		'box_types_search':{
			handler(){
				this.getLockerBoxTypes()
			},
			immediate : true,
		},
	},
	created(){
		this.init()
	},
	methods: {
		init()
		{
			this.getStateList()
		},
		initialize(){
			this.$emit('initialize')
		},
		initAndCloseDialog(){
			this.closeDialog()
			this.initialize()
		},
		closeDialog(){
			this.$emit('update:visible',false)
		},
		submitForm(item){
			this.saveModel(item)
		},
		saveModel(item){
			this.submit_loading = true
			this.errors = {}
			let payload = {
				id : item.id,
				name : item.name,
				terminal_id : item.terminal_id,
				address : item.address,
				state : item.state,
				city : item.city,
				pos_code : item.pos_code,
				latitude : item.location?.lat,
				longitude : item.location?.lng,
				available_box_types: item.available_box_types
			}	
			let theApi = this.$api.updateLocker(payload)
			theApi.then((res)=>{
				this.$toast.success(res.data.message)
				this.initAndCloseDialog()
			}).catch((err) => {
				this.errors = this.errorHandler_(err,[
					"name",
					"terminal_id",
					"address",
					"city",
					"state",
					"pos_code",
					"available_box_types"
				])
			}).finally(()=>{
				this.submit_loading = false
			})
		},
		getLockerBoxTypes(){
			let payload = {
				only_bookable: 1
			}
			this.box_types_loading = true
			this.$api.getLockerBoxTypeList(payload).then((res)=>{
				let { data } = res.data.result
				this.box_types_items = data
				// this.totalData_ = total
			}).catch((err)=>{
				this.errorHandler_(err)
			}).finally(()=>{
				this.box_types_loading = false
			})
		},
		assignLockerPartner(){
			this.partner_loading = true
			let payload = {
				id : this.item.id,
				owner_id : this.form.partner.id,
			}
			this.$api.assignLockerPartner(payload).then((res)=>{
				this.$toast.success(res.data.message)
				this.form.partner = res.data.result.partner
				this.initialize()
			}).catch((err) => {
				this.errorHandler_(err)
			}).finally(()=>{
				this.partner_loading = false
			})
		},
		getStateList()
		{
			this.$api.getStateList().then(async (res)=>{
				let { result } = res.data
				this.state_list = result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		clearTerminalId(item)
		{
			let payload = {
				id : item.id,
			}	
			this.$api.clearTerminalId(payload).then(async (res)=>{
				this.$toast.success(res.data.message)
				this.initAndCloseDialog()
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		}
	}
}
</script>