<template>
    <div v-if="loaded">
		<status :errors="errors" :successes="successes"/>

        <h1>{{ trans('KMS::shipments').shipment + ' ' + id }}</h1>
        <label>
            {{ trans('KMS::shipments').status_name }}:
            <select v-model="shipment.status" :disabled="shipment.is_announced">
                <option v-for="(name, value) in statuses" :value="value">{{ name }}</option>
            </select><br>
        </label>
        <label>
            {{ trans('KMS::shipments').comment }}:
            <textarea v-model="shipment.comment"></textarea>
        </label><br>
		<button type="button" v-if="dirty" @click="save">{{ trans('KMS::shipments').save }}</button>

		<h2>{{ trans('KMS::shipments').carrier }}</h2>
		<template v-if="shipment.can_be_announced">
			<label>
				{{ trans('KMS::shipments').notify_carrier }}
				<button @click="notifyCarrier" :disabled="notifying">{{ trans('KMS::shipments').announce }}</button>
			</label>
		</template>
		<template v-if="shipment.is_announced">
			<label>{{ trans('KMS::shipments').announced_at + ' ' + shipment.carrier_name }}</label><br>
			<label>
				{{ trans('KMS::shipments').tracking_code }}:
				<input type="text" readonly v-model="shipment.tracking_code"><br>
			</label>
			<label>
				{{ trans('KMS::shipments').tracking_url }}:
				<a :href="shipment.tracking_url">{{ shipment.tracking_url }}</a>
			</label><br>
			<a :href="downloadLink">{{ trans('KMS::shipments').download_label }}</a><br>
			<button @click="cancel" v-if="shipment.status !== 'canceled'" :disabled="canceling">{{ trans('KMS::shipments').cancel_shipment }}</button>
		</template>
		<template v-if="!shipment.is_announced && !shipment.can_be_announced">
			<label>{{ trans('KMS::shipments').not_yet_announced }}</label><br>
		</template>

		<h2>{{ trans('KMS::shipments').for_order }}</h2>
		<a :href="orderRoute" v-if="shipment.order">{{ this.trans('KMS::shipments').order + ' ' + shipment.order.order_number }}</a>

		<!--Show two tables. One with ordered products that arent added in the current shipment, one that are-->
		<template v-for="inShipment in [false, true]">
			<h2>{{ productTableTitle(inShipment) }}</h2>
			<table>
				<tr v-for="orderedProduct in orderedProducts(inShipment)">
					<td><input type="checkbox" v-model="selectedOrderedProductsIds" :value="orderedProduct.id" :disabled="shipment.is_announced"></td>
					<td>{{ orderedProduct.id }}</td>
					<td>{{ orderedProduct.name }}</td>
					<td>{{ orderedProduct.currencySymbol + ' ' + orderedProduct.price_formatted }}</td>
					<td>{{ orderedProduct.quantity }}</td>
					<td>{{ orderedProduct.stock_keeping_unit }}</td>
				</tr>
			</table>
			<button @click="addOrRemoveFromShipment(inShipment)" :disabled="shipment.is_announced">{{ addOrRemoveFromShipmentTitle(inShipment) }}</button>
		</template>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import { ShipmentService } from "../../../services/shipmentService";
import { OrderService } from "../../../services/orderService"
import Shipment from "./models/Shipment";
import Status from "../Status";
import ShipmentStatus from "./models/ShipmentStatus";

const shipmentService = new ShipmentService();
const orderService = new OrderService();

export default {
    name: "shipment-manager",
    props: {
        id: {
            required: true,
            type: Number
        }
    },
    components: {
    	Status
    },
    data: function () {
        return {
            loaded: false,
            shipment: null,
            dirty: false,
			selectedOrderedProductsIds: [],
			perPage: 5,
			page: 1,
			notifying: false,
			canceling: false,
			successes: [],
			errors: [],
        }
    },
    computed: {
        ...mapGetters({
            trans: "g11n/translation/translation",
            languagesHavingSites: "sites/languagesHavingSites",
        }),
		orderRoute: function() {
			if(!this.shipment.order) return '#';
			return '/kms/orders/' + this.shipment.order.id
		},
		statuses: function() {
			if(this.shipment.is_announced || this.shipment.status === ShipmentStatus.CANCELED) return this.trans('KMS::shipments').status
			else return this.trans('KMS::shipments').editable_status
		},
		downloadLink: function() {
			return shipmentService.downloadLabelForShipmentUrl(this.id)
		}
    },
    methods: {
        save: function() {
            shipmentService.update(this.shipment).then(() => {
				shipmentService.shipment(this.id)
					.then(this.receivedShipment)
					.catch(this.handleResponseError)
			})
        },
		cancel: function() {
			this.canceling = true
			shipmentService.cancel([this.id]).then(() => {
				shipmentService.shipment(this.id)
					.then(this.receivedShipment)
					.catch(this.handleResponseError)

				this.successes = [this.trans('KMS::shipments').canceled_successfully];
			}).catch(this.handleResponseError).finally(() => {
				this.canceling = false
			})
		},
		receivedShipment: function(response) {
			this.shipment = new Shipment(response.data.data)
			this.loaded = true
			this.$nextTick(() => {
				this.dirty = false
			})
		},
		productTableTitle: function(inShipment) {
			if(inShipment) {
				return this.trans('KMS::shipments').products_shipment
			} else {
				return this.trans('KMS::shipments').ordered_products
			}
		},
		addOrRemoveFromShipmentTitle: function(inShipment) {
			if(inShipment) {
				return this.trans('KMS::shipments').remove_from_shipment
			} else {
				return this.trans('KMS::shipments').add_to_shipment
			}
		},
		orderedProducts: function(inShipment) {
			if(!this.shipment.order || !this.shipment.order.orderedProducts) return []
			return this.shipment.order.orderedProducts.filter((orderedProduct) => {
				return inShipment ? orderedProduct.shipment_id === this.id : orderedProduct.shipment_id === null
			})
		},
		addOrRemoveFromShipment(inShipment) {
			let promise = null;
			if(inShipment) {
				const orderedProductIdsInShipment = this.orderedProducts(true).map((orderedProduct) => orderedProduct.id)

				promise = shipmentService.removeOrderedProductsFromShipment(
					this.shipment.id,
					this.selectedOrderedProductsIds.filter((selectedOrderedProductId) => orderedProductIdsInShipment.indexOf(selectedOrderedProductId) !== -1)
				)
			} else {
				const orderedProductIds = this.orderedProducts(false).map((orderedProduct) => orderedProduct.id)

				promise = shipmentService.addOrderedProductsFromShipment(
					this.shipment.id,
					this.selectedOrderedProductsIds.filter((selectedOrderedProductId) => orderedProductIds.indexOf(selectedOrderedProductId) !== -1)
				)
			}
			return promise.then(() => {
				shipmentService.shipment(this.id).then(this.receivedShipment).catch(this.handleResponseError)
			})
		},
		notifyCarrier: function() {
        	this.notifying = true
        	shipmentService.notifyCarrier([this.id]).then(() => {
				shipmentService.shipment(this.id)
					.then(this.receivedShipment)
					.catch(this.handleResponseError)
			}).catch(this.handleResponseError).finally(() => {
				this.notifying = false
			})
		},
		handleResponseError: function(error) {
			console.error('An error occured:')
			this.errors = [error.response.data.message]
			console.log(error.response.data)
		}
    },
    watch: {
        shipment: {
            handler: function(newValue, oldValue) {
                if(!oldValue) return
                this.dirty = true
            },
            deep: true
        },
    },
    mounted() {
        shipmentService.shipment(this.id).then(this.receivedShipment).catch(this.handleResponseError)
    }
}
</script>

<style scoped>

</style>