<template>
	<v-container>
		<!-- introduction -->
		<v-row align="end">
			<v-col>
				<div class="headline font-weight-bold">Shipping Method</div>
				<div class="subtitle-2 grey--text">List of shipping method available in the system</div>
			</v-col>
		</v-row>
		<!-- statistics bar -->
		<v-row v-if="show_statistics" class="ma-0">
			<v-col cols="12" md="4">
				<v-card>
					<v-icon size="150">mdi-google-analytics</v-icon>
				</v-card>
			</v-col>
			<v-col cols="12" md="4">
				<v-card>
					<v-icon size="150">mdi-google-analytics</v-icon>
				</v-card>
			</v-col>
			<v-col cols="12" md="4">
				<v-card>
					<v-icon size="150">mdi-google-analytics</v-icon>
				</v-card>
			</v-col>
		</v-row>
		<!-- search bar -->
		<v-row
			dense
			align="center"
			class="mt-3"
		>
			<w-search-bar
				:search.sync="search_.search"
				:search-by.sync="search_.searchBy"
				:disabled="model_loading_"
				:items="searchBy_options"
				@search="searchData_()"
			></w-search-bar>
		</v-row>
		<!--  -->
		<v-row align="center" class="mt-3" justify="end">
			<v-col cols="12" md="auto">
				<v-btn
					class="text-capitalize" 
					color="primary" small
					@click="newItem_()"
				>
					<v-icon left>mdi-plus</v-icon>New
				</v-btn>
			</v-col>
			<v-spacer></v-spacer>
			<v-col cols="auto">
				<w-action-btn-group
					:items="action_btn_group_items()"
				></w-action-btn-group>
			</v-col>
		</v-row>
		<v-card class="mt-4" color="transparent" flat>
			<v-data-table
				ref="dataTable"
				:headers="table_headers"
				:items="resourceDataSet_"
				:options.sync="settings_"
				:server-items-length="totalData_"
				:footer-props="{
					'items-per-page-options': [5, 10, 25, 50]
				}"
				:loading="model_loading_"
				disable-sort
				:hide-default-header="view_module"
				:item-class="row_classes_"
				:class="view_module ? 'row-gap' : '' "
			>
				<template v-if="view_module" #body="{ items, headers }">
					<td :colspan="headers.length">
						<v-row dense class="ma-0">
							<v-col
								v-for="item in items" :key="item.id"
								cols="12" sm="6" md="4" 
								lg="3"
							>
								<ShippingMethodCard 
									:item="item"
									:menu="menu_items(item)"
									class="glowable-small"
								></ShippingMethodCard>
							</v-col>
						</v-row>
					</td>
				</template>
				<template #[`item.is_enabled`]="{ item }">
					<v-switch
						v-model="item.is_enabled"
						inset
						:label="item.is_enabled ? 'Enabled' : 'Disabled'"
						@change="toggleStatus(item)"
					></v-switch>
				</template>
				<template #[`item.action`]="{ item }">
					<v-btn icon small :to="'/shipping-method/info/'+item.id">
						<v-icon small>mdi-eye</v-icon>
					</v-btn>
					<w-dropdown-menu
						left bottom
						:items="menu_items(item)"
					></w-dropdown-menu>	
				</template>
			</v-data-table>
		</v-card>

		<!-- form dialog -->
		<v-dialog v-model="form_dialog_" max-width="550px" persistent>
			<ShippingMethodForm
				:item="form_item_" :action="form_action_" :visible.sync="form_dialog_"
				:shipping-type-list="shipping_type_list"
				:geo-zone-list="geo_zone_list"
				:courier-list="courier_list"
				:box-type-list="box_type_list"
				@initialize="initialize_()"
			></ShippingMethodForm>
		</v-dialog>

		<!-- filter dialog -->
		<w-side-dialog
			v-model="filter_dialog"
			title="Filters"
			clearable
			@clear="initFilters()"
		>
			<template #default>
				<v-row dense>
					<template v-for="(filter,i) in filter_options">
						<v-col :key="i" cols="12">
							<v-select
								v-model="filters_[filter.model]"
								:label="filter.label"
								:items="filter.items"
								class="caption"
								outlined
								dense hide-details
							></v-select>
						</v-col>
					</template>
				</v-row>
			</template>
			<template #actions>
				<div class="text-right">
					<v-btn 
						rounded block color="primary"
						@click="searchData_()"
					>
						Apply
					</v-btn>
				</div>
			</template>
		</w-side-dialog>

		<!-- Sort dialog -->
		<w-side-dialog
			v-model="sort_dialog"
			title="Sort"
		>
			<template #default>
				<v-radio-group
					v-model="sort_" 
					dense hide-details
					mandatory
					class="mt-0"
				>
					<template v-for="(sort,i) in sort_options">
						<v-radio :key="i" :label="sort.label" :value="sort.value"></v-radio>
					</template>
				</v-radio-group>
			</template>
			<template #actions>
				<div class="text-right">
					<v-btn 
						rounded block color="primary"
						@click="searchData_()"
					>
						Apply
					</v-btn>
				</div>
			</template>
		</w-side-dialog>

		<!-- model info dialog -->
		<v-navigation-drawer
			v-model="view_dialog_"
			floating
			app
			right
			temporary
			:style="$vuetify.breakpoint.mdAndUp ? 'min-width: 350px;' : '' "
		>	
			<v-card height="100%">
				<ShippingMethodCard :item="view_item_" class="v-card--flat"></ShippingMethodCard>
			</v-card>
		</v-navigation-drawer>
	</v-container>
</template>

<script>
import ShippingMethodCard from "./ShippingMethodCard"
import ShippingMethodForm from "./ShippingMethodForm"
import WActionBtnGroup from "@components/WActionBtnGroup"
import WDropdownMenu from "@components/WDropdownMenu"
import WSearchBar from "@components/WSearchBar"
import WSideDialog from "@components/WSideDialog"
import { resourceMixin } from "@/js/mixins/ResourceMixin"
import { formActionMixin } from "@/js/mixins/FormActionMixin"
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
import configShippingType from '@/js/configs/shippingType'
export default{
	components:{
		ShippingMethodCard,
		ShippingMethodForm,
		WActionBtnGroup,
		WDropdownMenu,
		WSearchBar,
		WSideDialog,
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			table_headers: [
				{ text: '#', value: 'id' },
				{ text: 'Name', value: 'name' },
				{ text: 'Type', value: 'shipping_type.name' },
				{ text: 'Status', value: 'is_enabled' },
				{ text: 'Actions', value: 'action', class: 'text-center' },
			],
			show_statistics: false,
			view_module: false,

			filter_dialog: false,
			sort_dialog: false,
			view_more_dialog: false,

			filter_options:[],
			sort_options:[],
			searchBy_options: [
				{ value: 'id', text: 'ID' },
				{ value: 'name', text: 'Name' },
			],
			shipping_type_list: [],
			geo_zone_list: [],
			courier_list: [],
			box_type_list: [],
			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,
		}
	},
	created(){
		this.search_.searchBy = 'name'
		
		this.options_.activity = this.getActivityRefs_()
		this.getAllRefs_([
			this.getShippingTypeListRef(),
			this.getGeoZoneListRef(),
			this.getCourierListRef(),
			this.getBoxTypeListRef()
		]).then(()=>{
			this.setupFilterBar()
			this.initFilters()
			this.setupSortOptions()
		}).then(()=>{
			this.initialize_()
		})
	},
	methods:{
		initFilters(){
			this.filters_ = {
				activity : 1,
			}
		},
		getResourceData_(){
			let payload = {
				...this.setPagination_(),
				...this.search_,
				...this.filters_,
				...this.sort_,
			}
			this.model_loading_ = true
			this.$api.getShippingMethodList(payload).then((res)=>{
				let { data, total } = res.data.result
				this.resourceDataSet_ = data
				this.totalData_ = total
			}).catch((err)=>{
				this.errorHandler_(err)
			}).finally(()=>{
				this.model_loading_ = false
			})
		},
		getShippingTypeListRef(){
			this.$api.getShippingTypeList({}).then((res)=>{
				this.shipping_type_list = res.data.result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getGeoZoneListRef(){
			this.$api.getGeoZoneList({}).then((res)=>{
				this.geo_zone_list = res.data.result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getCourierListRef(){
			this.$api.getCourierAll({}).then((res)=>{
				this.courier_list = res.data.result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getBoxTypeListRef(){
			let payload = {
				itemsPerPage: 99,
				only_bookable: 1
			}
			this.$api.getLockerBoxTypeList(payload).then((res)=>{
				let { data } = res.data.result
				this.box_type_list = data
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		archiveModel_(item){
			let payload = {
				id : item.id
			}
			this.$api.archiveShippingMethod(payload).then((res) => {
				this.initialize_();
				this.$toast.success(res.data.message)
			}).catch((err) => {
				this.errorHandler_(err)
			})
		},
		newItem_(){
			let item = {
				flat_rate: {},
				free_shipping: {},
				weight_based: {},
				dynamic_weight_based: {
					weights: []
				},
				box_type_based: {},
			}
			let model = this.cloneDeep_(item)
			this.bindAction_('new',model)
		},
		setupFilterBar(){
			this.filter_options = [
				{	
					cols: 12,
					model: "activity",
					label: "Activity",
					items: this.options_.activity,
				},
			]
		},
		setupSortOptions(){
			this.sort_options = [
				{ label: "id (ASC)", value: {sortBy: "id", sortDesc : 0 } },
				{ label: "id (DESC)", value: {sortBy: "id", sortDesc : 1 } },
				{ label: "Status (DISABLED)", value: {sortBy: "is_enabled", sortDesc : 0 } },
				{ label: "Status (ENABLED)", value: {sortBy: "is_enabled", sortDesc : 1 } },
			]
			this.sort_ = this.sort_options[0].value
		},
		menu_items(item){
			return [
				{
					icon: "mdi-eye", title: "View More",
					action: ()=>{ this.viewMore_(item) }
				},
				{
					icon: "mdi-content-duplicate", title: "Duplicate",
					action: () => { this.duplicateItem_(item) }
				},
				{
					icon: "mdi-square-edit-outline", title: "Edit",
					action: () => { this.editItem2(item) }
				},
				{
					icon: (item.deleted_at ? "mdi-delete-off" : "mdi-delete"), 
					title: (item.deleted_at ? "Activate" : "Archive"), 
					icon_class: "red--text",
					title_class: "red--text",
					action: () => { this.archiveModel_(item) }
				},
			]
		},
		editItem2(item = {}){
			switch(item.shipping_type_id){
			case this.FLAT_RATE:
				item.free_shipping = {}
				item.weight_based = {}
				item.dynamic_weight_based = {}
				item.box_type_based = {}
				break;
			case this.FREE_SHIPPING:
				item.flat_rate = {}
				item.weight_based = {}
				item.dynamic_weight_based = {}
				item.box_type_based = {}
				break;
			case this.WEIGHT_BASED:
				item.free_shipping = {}
				item.flat_rate = {}
				item.dynamic_weight_based = {}
				item.box_type_based = {}
				break;
			case this.DYNAMIC_WEIGHT_BASED:
				item.free_shipping = {}
				item.flat_rate = {}
				item.weight_based = {}
				item.box_type_based = {}
				break;
			case this.BOX_TYPE_BASED:
				item.flat_rate = {}
				item.free_shipping = {}
				item.weight_based = {}
				item.dynamic_weight_based = {}
				break;
			}
			let model = this.cloneDeep_(item)
			this.bindAction_('edit',model)
		},
		action_btn_group_items(){
			return [
				{
					icon: "mdi-refresh",
					disabled: this.model_loading_,
					action: () => { this.searchData_() }
				},
				{	
					icon: "mdi-filter-outline",
					action: () => { this.filter_dialog = true }
				},
				{	
					icon: "mdi-sort",
					action: () => { this.sort_dialog = true }
				},
				// {	
				// 	icon: "mdi-download",
				// 	action: () => { console.log('download') }
				// },
				// {	
				// 	icon: "mdi-google-analytics",
				// 	action: () => { this.show_statistics = !this.show_statistics }
				// // },
				// {	
				// 	icon: this.view_module ? 'mdi-view-list' : 'mdi-view-module',
				// 	action: () => { this.view_module = !this.view_module }
				// },
			]
		},
		toggleStatus(item){
			let geo_zone_id = null
			let box_type_id = null
			
			if(item.flat_rate)
				geo_zone_id = item.flat_rate.geo_zone_id
			if(item.free_shipping)
				geo_zone_id = item.free_shipping.geo_zone_id
			if(item.weight_based)
				geo_zone_id = item.weight_based.geo_zone_id
			if(item.dynamic_weight_based)
				geo_zone_id = item.dynamic_weight_based.geo_zone_id
			if(item.box_type_based)
			{
				box_type_id = item.box_type_based.box_type_id
			}
			let payload = {
				id: item.id,
				shipping_type_id: item.shipping_type_id,
				is_enabled: item.is_enabled
			}

			if(geo_zone_id)
				payload.geo_zone_id = geo_zone_id

			if(box_type_id)
				payload.box_type_id = box_type_id

			this.$api.updateStatusShippingMethod(payload)
				.then((res) => {
					this.$toast.success(res.data.message)
					this.initialize_()
				})
		}
	}
}
</script>