<template>
    <div>
        <h1>{{ trans('KMS::discounts').discounts }}</h1>

        <ul v-if="discounts" v-sortable:discounts="sortableJsOptions">
            <li v-for="discount in discounts" :key="discount.id" v-if="discount.state !== 4" class="sortable">
                <span>{{ discount.translation.title }}</span>
                <button type="button" :disabled="editDiscount" @click="startEditingDiscount(discount)">{{ trans('KMS::discounts').edit }}</button>
                <button type="button" :disabled="editDiscount" @click="showDeleteDiscountModal(discount)">{{ trans('KMS::discounts').delete }}</button>
            </li>
        </ul>

        <button type="button" :disabled="editDiscount" @click="makeNewDiscount">{{ trans('KMS::discounts').new }}</button>
        <button type="button"
                v-if="orderState === 'dirty' || orderState === 'saving'"
                :disabled="orderState === 'saving'"
                @click.prevent="saveSortOrder"
        >{{ trans('KMS::discounts').save_order }}</button>

        <editor
            v-if="editDiscount" :discount="editDiscount"
            @cancel="editDiscount = null"
            @saved="saved"
        />
        <confirm-modal
            v-bind="confirmModal"
            @cancel="hideDeleteDiscountModal"
            @confirm="deleteDiscount"
        />
    </div>
</template>

<script>
import Editor from "./Editor";
import {DiscountService} from "../../../services/discountService";
import Discount from "./models/Discount";
import ConfirmModal from "../../vue/ConfirmModal";
import {mapGetters} from "vuex";
import {States} from "../properties/resources/baseResource";

let discountService = new DiscountService();

export default {
    name: "Discounts",
    components: {
        Editor,
        ConfirmModal
    },
    data: function() {
        return {
            orderState: '',
            discounts: [],
            editDiscount: null,
            discountToDelete: null,
            confirmModal: {
                show: false,
                headerText: '',
                message: '',
                confirmText: '',
                cancelText: '',
            },
            sortableJsOptions: {
              animation: 200
            }
        }
    },
    computed: {
        ...mapGetters({
            trans: "g11n/translation/translation",
            languagesHavingSites: "sites/languagesHavingSites",
        }),
    },
    methods: {
        makeNewDiscount: function () {
            this.editDiscount = new Discount()
        },
        loadDiscounts: function () {
            discountService.discounts().then(function (response) {
                if (Array.isArray(response.data)) {
                    this.discounts = response.data.map((discountObject) => {
                        return new Discount(discountObject);
                    })
                }
            }.bind(this));
        },
        showDeleteDiscountModal: function(discount) {
            this.discountToDelete = discount
            this.confirmModal.show = true
            this.confirmModal.headerText = this.trans('KMS::discounts').confirm_modals.delete_discount.header_text
            this.confirmModal.message = this.trans('KMS::discounts').confirm_modals.delete_discount.message
            this.confirmModal.confirmText = this.trans('KMS::discounts').confirm_modals.delete_discount.confirm_text
            this.confirmModal.cancelText = this.trans('KMS::discounts').confirm_modals.delete_discount.cancel_text
        },
        hideDeleteDiscountModal() {
            this.discountToDelete = null
            this.confirmModal.show = false
        },
        deleteDiscount() {
            if(this.discountToDelete.id > 0 && this.discountToDelete.state !== States.NEW) {
                this.discountToDelete.state = States.DELETED

                discountService.update(this.discountToDelete).catch((errorResponse) => {
                    console.error(errorResponse)
                }).finally(() => {
                    this.discountToDelete = null
                    this.confirmModal.show = false
                })
            } else {
                //Just remove it from the array since it does not exist yet
                this.discounts.splice(
                    this.discounts.indexOf((discountFromArray) => discountFromArray.id === this.discountToDelete.id), 1
                )
                this.discountToDelete = null
                this.confirmModal.show = false
            }
        },
        startEditingDiscount: function (discount) {
            this.editDiscount = discount
        },
        saved: function (newDiscount) {
            // this.discounts.splice(this.discounts.find((discountFromArray) => discountFromArray.id === newDiscount.id), 1, newDiscount) //Set the new discount.
            this.editDiscount = null;
            if(this.orderState === 'dirty') this.saveSortOrder() //Also loads discounts when finished
            else this.loadDiscounts(); //Reload discounts to force re-render
        },
        saveSortOrder: function() {
            this.orderState = 'saving'

            let orderIndex = 1;
            let sortOrderData = {}
            this.discounts.forEach((discount) => {
                sortOrderData[discount.id] = orderIndex;
                orderIndex++
            })

            const sortSavePromise = discountService.sortDiscountsById(sortOrderData).then((response) => {
                this.discounts = response.data;
                return this.discounts;
            })

            sortSavePromise.catch((response) => {
                console.log('Could not save discount order because of an error');
            })

            return sortSavePromise
        }
    },
    watch: {
        discounts: function(newDiscounts, oldDiscounts) {
            if(oldDiscounts.length === 0 || this.orderState === 'saving') {
                this.orderState = ''
                return;
            }

            this.orderState = 'dirty'
        }
    },
    mounted() {
        this.loadDiscounts()
    }
}
</script>

<style scoped>
    .sortable {
        cursor: pointer;
    }

    .sortable-chosen {

    }

    .sortable-chosen.sortable-ghost {
        opacity: 0;
    }
    .sortable-ghost {
        background-color: #dadada;
        opacity: 1;
    }
</style>