<template>
	<div>
		<v-card class="radius-10">
			<v-card-title>
				<span class="headline">{{ (action == 'edit') ? 'Edit Shipping Method' : 'New Shipping Method' }}</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-select
							v-model="form.shipping_type_id"
							:items="shippingTypeList"
							label="Shipping Type"
							dense
							:readonly="action == 'edit'"
							item-text="name"
							item-value="id"
							:error-messages="errors.shipping_type_id"
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.name"
							label="Name" placeholder="Name"
							dense
							outlined
							:error-messages="errors.name"
						></v-text-field>
					</v-col>
				</v-row>
				<v-row v-if="form.shipping_type_id == FLAT_RATE" dense>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.flat_rate.cost"
							label="Cost(RM)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.flat_rate.cost"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-select
							v-model="form.flat_rate.couriers"
							label="Courier"
							dense
							:items="courierList"
							item-value="id" item-text="name"
							return-object
							chips
							multiple
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.flat_rate.geo_zone_id"
							label="Geo Zone" placeholder="Geo Zone"
							dense
							:items="geoZoneList"
							item-value="id" item-text="name"
							:error-messages="errors.flat_rate.geo_zone_id"
						></v-autocomplete>
					</v-col>
				</v-row>
				<v-row v-if="form.shipping_type_id == BOX_TYPE_BASED" dense>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.box_type_based.cost"
							label="Cost(RM)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.box_type_based.cost"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-select
							v-model="form.box_type_based.couriers"
							label="Courier"
							dense
							:items="courierList"
							item-value="id" item-text="name"
							return-object
							chips
							multiple
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.box_type_based.box_type_id"
							label="Box Type ID" placeholder="Box Type ID"
							dense
							:items="boxTypeList"
							item-value="id" item-text="title"
							:error-messages="errors.box_type_based.box_type_id"
						></v-autocomplete>
					</v-col>
				</v-row>
				<v-row v-if="form.shipping_type_id == FREE_SHIPPING" dense>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.free_shipping.subtotal"
							label="Subtotal(RM)" placeholder="0.00"
							dense
							outlined
							persistent-hint
							hint="Sub-Total amount needed before the free shipping module becomes available"
							:error-messages="errors.free_shipping.subtotal"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-select
							v-model="form.free_shipping.couriers"
							label="Courier"
							dense
							:items="courierList"
							item-value="id" item-text="name"
							return-object
							chips
							multiple
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.free_shipping.geo_zone_id"
							label="Geo Zone" placeholder="Geo Zone"
							dense
							:items="geoZoneList"
							item-value="id" item-text="name"
							:error-messages="errors.free_shipping.geo_zone_id"
						></v-autocomplete>
					</v-col>
				</v-row>
				<v-row v-if="form.shipping_type_id == WEIGHT_BASED" dense>
					<v-col cols="12" md="6">
						<v-text-field
							v-model="form.weight_based.first_weight"
							label="First Weight(g)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.weight_based.first_weight"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="6">
						<v-text-field
							v-model="form.weight_based.price_first_weight"
							label="Price for First Weight(RM)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.weight_based.price_first_weight"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="6">
						<v-text-field
							v-model="form.weight_based.repeating_weight"
							label="Repeating Next Weight(g)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.weight_based.repeating_weight"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="6">
						<v-text-field
							v-model="form.weight_based.price_repeating_weight"
							label="Price for Repeating Next Weight(RM)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.weight_based.price_repeating_weight"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="6">
						<v-text-field
							v-model="form.weight_based.additional_fee"
							label="Additional Fee (%)" placeholder="0.00"
							dense
							outlined
							:error-messages="errors.weight_based.additional_fee"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-select
							v-model="form.weight_based.couriers"
							label="Courier"
							dense
							:items="courierList"
							item-value="id" item-text="name"
							return-object
							chips
							multiple
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.weight_based.geo_zone_id"
							label="Geo Zone" placeholder="Geo Zone"
							dense
							:items="geoZoneList"
							item-value="id" item-text="name"
							:error-messages="errors.weight_based.geo_zone_id"
						></v-autocomplete>
					</v-col>
				</v-row>
				<v-row v-if="form.shipping_type_id == DYNAMIC_WEIGHT_BASED" dense>
					<v-col cols="12" md="12">
						<v-card
							flat
							dense
						>
							<v-card-text class="ma-0 pa-0">
								<v-row v-for="(row,index) in form.dynamic_weight_based.weights" :key="index" dense>
									<v-col cols="12" md="5">
										<v-text-field
											v-model="row.weight"
											:label="$options.filters.ordinal_suffix_of(index+1) + ' Weight(g)'" placeholder="0.00"
											dense
											outlined
										></v-text-field>
									</v-col>
									<v-col cols="12" md="5">
										<v-text-field
											v-model="row.price"
											:label="$options.filters.ordinal_suffix_of(index+1) + ' Price (RM)'" placeholder="0.00"
											dense
											outlined
										></v-text-field>
									</v-col>
									<v-col cols="12" md="2">
										<v-btn
											class="text-capitalize" 
											text
											color="error" small
											@click="removeDynamicWeight(index)"
										>
											<v-icon left>mdi-minus</v-icon>
										</v-btn>
									</v-col>
								</v-row>
							</v-card-text>
							<v-card-actions>
								<v-btn
									class="text-capitalize" 
									color="primary" small
									@click="addDynamicWeight()"
								>
									<v-icon left>mdi-plus</v-icon>Weight
								</v-btn>
							</v-card-actions>
						</v-card>
					</v-col>
					<v-col cols="12" md="12">
						<v-select
							v-model="form.dynamic_weight_based.couriers"
							label="Courier"
							dense
							:items="courierList"
							item-value="id" item-text="name"
							return-object
							chips
							multiple
						></v-select>
					</v-col>
					<v-col cols="12" md="12">
						<v-autocomplete
							v-model="form.dynamic_weight_based.geo_zone_id"
							label="Geo Zone" placeholder="Geo Zone"
							dense
							:items="geoZoneList"
							item-value="id" item-text="name"
							:error-messages="errors.dynamic_weight_based.geo_zone_id"
						></v-autocomplete>
					</v-col>
				</v-row>
				<v-row dense>
					<v-col cols="12" md="12">
						<v-checkbox
							v-model="form.is_enabled"
							dense
							label="Active"
							:error-messages="errors.is_enabled"
							persistent-hint
							hint="If checked, will auto-disable other similar shipping type"
						></v-checkbox>
					</v-col>
				</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>
	</div>
</template>

<script>
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
import configShippingType from '@/js/configs/shippingType'
export default{
	mixins: [ 
		errorHandlerMixin
	],
	props:{
		visible: {
			type: Boolean,
			required: true,
		},
		item: {
			type: Object,
			required: true,
			default: ()=>{
				return {}
			}
		},
		action: {
			type: String,
			required: true,
		},
		shippingTypeList: {
			type: Array,
			required: true,
			default: ()=>{
				return []
			}
		},
		geoZoneList: {
			type: Array,
			required: true,
			default: ()=>{
				return []
			}
		},
		courierList: {
			type: Array,
			required: true,
			default: ()=>{
				return []
			}
		},
		boxTypeList: {
			type: Array,
			required: true,
			default: ()=>{
				return []
			}
		}
	},
	data () {
		return {
			form : {
				flat_rate: {},
				free_shipping: {},
				weight_based: {},
				dynamic_weight_based: {},
				box_type_based: {},
			},
			errors : {},
			submit_loading : false,
			FLAT_RATE: configShippingType.FLAT_RATE,
			FREE_SHIPPING: configShippingType.FREE_SHIPPING,
			WEIGHT_BASED: configShippingType.WEIGHT_BASED,
			DYNAMIC_WEIGHT_BASED: configShippingType.DYNAMIC_WEIGHT_BASED,
			BOX_TYPE_BASED: configShippingType.BOX_TYPE_BASED,
		}
	},
	watch:{
		'form.shipping_type_id':{
			handler(){
				this.errors = {
					flat_rate: {},
					free_shipping: {},
					weight_based: {},
					dynamic_weight_based: {},
					box_type_based: {},
				}
			}
		},
		'item':{
			handler(){
				this.form = this.item
				if(this.action == 'new')
				{
					this.form.is_enabled = 1
				}
			},
			immediate: true,
		},
		'visible':{
			handler: function (newVal){
				if(newVal){
					//
				}else{
					//
					// this.form = {
					// 	flat_rate: {},
					// 	free_shipping: {},
					// 	weight_based: {},
					// 	dynamic_weight_based: {},
					// }
					this.errors = {
						flat_rate: {},
						free_shipping: {},
						weight_based: {},
						dynamic_weight_based: {},
						box_type_based: {},
					}
				}
			},
			immediate : true,
		},
	},
	created(){
		this.errors = {
			flat_rate: {},
			free_shipping: {},
			weight_based: {},
			dynamic_weight_based: {},
			box_type_based: {},
		}
	},
	methods: {
		initialize(){
			this.closeDialog()
			this.$emit('initialize')
		},
		closeDialog(){
			this.$emit('update:visible',false)
		},
		submitForm(item){
			this.saveModel(item)
		},
		saveModel(item){
			this.submit_loading = true
			this.errors = {
				flat_rate: {},
				free_shipping: {},
				weight_based: {},
				dynamic_weight_based: {},
				box_type_based: {},
			}
			let payload = {}
			switch(item.shipping_type_id){
			case this.FLAT_RATE:
				payload = {
					id : item.id,
					name : item.name,
					shipping_type_id: item.shipping_type_id,
					is_enabled: item.is_enabled,
					flat_rate: {
						geo_zone_id: item.flat_rate.geo_zone_id,
						cost: item.flat_rate.cost,
						couriers: item.flat_rate.couriers
					}
				}
				break;
			case this.FREE_SHIPPING:
				payload = {
					id : item.id,
					name : item.name,
					shipping_type_id: item.shipping_type_id,
					is_enabled: item.is_enabled,
					free_shipping: {
						geo_zone_id: item.free_shipping.geo_zone_id,
						subtotal: item.free_shipping.subtotal,
						couriers: item.free_shipping.couriers
					}
				}
				break;
			case this.WEIGHT_BASED:
				payload = {
					id : item.id,
					name : item.name,
					shipping_type_id: item.shipping_type_id,
					is_enabled: item.is_enabled,
					weight_based: {
						geo_zone_id: item.weight_based.geo_zone_id,
						first_weight: item.weight_based.first_weight,
						price_first_weight: item.weight_based.price_first_weight,
						repeating_weight: item.weight_based.repeating_weight,
						price_repeating_weight: item.weight_based.price_repeating_weight,
						additional_fee: item.weight_based.additional_fee,
						couriers: item.weight_based.couriers
					},
				}
				break;
			case this.DYNAMIC_WEIGHT_BASED:
				payload = {
					id : item.id,
					name : item.name,
					shipping_type_id: item.shipping_type_id,
					is_enabled: item.is_enabled,
					dynamic_weight_based: {
						geo_zone_id: item.dynamic_weight_based.geo_zone_id,
						couriers: item.dynamic_weight_based.couriers,
						weights: item.dynamic_weight_based.weights
					},
				}
				break;
			case this.BOX_TYPE_BASED:
				payload = {
					id : item.id,
					name : item.name,
					shipping_type_id: item.shipping_type_id,
					is_enabled: item.is_enabled,
					box_type_based: {
						box_type_id: item.box_type_based.box_type_id,
						cost: item.box_type_based.cost,
						couriers: item.box_type_based.couriers,
					}
				}
				break;
			}
			let theApi = (this.action == "new") ? this.$api.createShippingMethod(payload) : this.$api.updateShippingMethod(payload)
			theApi.then((res)=>{
				// if(this.action == "new"){
				// 	this.form.id = res.data.result.id
				// }else{
				this.$toast.success(res.data.message)
				this.initialize()
				// }
			}).catch((err) => {
				this.errors = this.errorHandler_(err,[
					"name",
					"shipping_type_id",
					"flat_rate.geo_zone_id",
					"box_type_based.geo_zone_id",
					"free_shipping.geo_zone_id",
					"weight_based.geo_zone_id",
					"dynamic_weight_based.geo_zone_id",
					"is_enabled",
					"flat_rate.cost",
					"box_type_based.cost",
					"free_shipping.subtotal",
					"weight_based.first_weight",
					"weight_based.price_first_weight",
					"weight_based.repeating_weight",
					"weight_based.price_repeating_weight",
					"weight_based.additional_fee",
					"box_type_based.box_type_id",
				])
				this.submit_loading = false
			}).finally(()=>{
				this.submit_loading = false
			})
		},
		addDynamicWeight(){
			this.form.dynamic_weight_based.weights.push({
				id: null,
				weight: null,
				price: null
			})
		},
		removeDynamicWeight(i){
			this.form.dynamic_weight_based.weights.splice(i, 1)
		}
	}
}
</script>