// here we need to change window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"] to add actions and this conditions like this:
//                     <button v-if="window.TT_CONFIG['WAREHOUSE_ADMIN'] == true && status === 'new'" class="btn btn-warning" @click="changeStatus('in_progress')">In
//                       Bearbeitung
//                     </button>
//                     <button v-if="window.TT_CONFIG['WAREHOUSE_ADMIN'] == true && (status === 'new' || status === 'in_progress')" class="btn btn-success"
//                             @click="changeStatus('accepted')">Akzeptieren
//                     </button>
//                     <button v-if="window.TT_CONFIG['WAREHOUSE_ADMIN'] == true && status === 'accepted'" class="btn btn-info" @click="changeStatus('invoiced')">
//                       Verrechnet
//                     </button>
//                     <button class="btn btn-info" @click="$emit('open-signing-modal', id)">Unterschreiben</button>

// inside additionalActions each entry looks like {
//     "key": "openHistory",
//     "title": "Historie",
//     "class": "fas fa-history text-primary"
// } but this is without the condition function

window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"] = [
    ...window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"],
    {
        "key":   "status_to_progress",
        "title": "In Bearbeitung",
        "class": "fas fa-cog text-warning",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.status === 'new',
    },
    {
        "key":   "status_to_accepted",
        "title": "Akzeptieren",
        "class": "fas fa-check text-success",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && (row.status === 'new' || row.status === 'in_progress'),
    },
    {
        "key":   "status_to_invoiced",
        "title": "Verrechnet",
        "class": "fas fa-file-invoice text-info",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.status === 'accepted',
    },
]


Vue.component('warehouse-shipping-note-positions', {
    //language=Vue
    props:       {
        positions:    Array,
        hoursEntries: Array
    }, data() {
        return {
            articleData: {}, loading: false, articlePacketData: {}, userData: {}
        }
    }, template: `
                   <div>
                     <div v-if="loading" class="text-center">
                       <i class="fa fa-spinner fa-spin"></i>
                     </div>


                     <ul v-if="!loading">
                       <li v-for="position in positions">
                         <span>{{ position.amount }}x
                           {{ position.article ? articleData[position.article]?.text : position.articlePacket ? articlePacketData[position.articlePacket]?.text : position.articleText }}</span>
                       </li>
                       <template v-for="entry in hoursEntries">
                         <li><span>{{ entry.hourCount }}h Arbeitszeit</span></li>
                         <li v-if="entry.carId">{{ entry.kilometerCount }}km Anfahrt</li>
                       </template>
                     </ul>
                   </div>
                 `, async mounted() {
        this.loading = true;
        for (const position of this.positions) {
            if (position.article) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticle/autoComplete?searchedID=' + position.article);
                this.$set(this.articleData, position.article, response.data[0]);
            } else if (position.articlePacket) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticlePacket/autoComplete?searchedID=' + position.articlePacket);
                this.$set(this.articlePacketData, position.articlePacket, response.data[0]);
            }
        }
        for (const entry of this.hoursEntries) {
            if (entry.userId) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/userAutoComplete?searchedID=' + entry.userId);
                this.$set(this.userData, entry.userId, response.data[0]);
            }
        }
        this.loading = false;
    }
})

// noinspection JSUnusedLocalSymbols
Vue.component('warehouse-shipping-note', {
    //language=Vue
    template: `
                <tt-card>
                  <warehouse-shipping-note-modal v-if="shippingNoteModalId" :id="shippingNoteModalId"
                                                 @close="shippingNoteModalId = null;$refs.table.$refs.table.refreshTable()"
                                                 @open-signing-modal="signingShippingNoteId = $event"/>
                  <warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
                  <warehouse-shipping-note-signature-pad v-if="signingShippingNoteId" :shipping-note-id="signingShippingNoteId"
                                                         @close="signingShippingNoteId = null"/>

                  <button @click="shippingNoteModalId = 'create'" class="btn btn-primary">Lieferschein erstellen</button>

                  <tt-table-crud emit-edit
                                 @openHistory="historyModal = true; historyModalId = $event.id"
                                 @print="window.open(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/createPDF?id=' + $event.id)"
                                 @printWithPrice="window.open(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/createPDF?id=' + $event.id + '&price=true')"
                                 @status_to_progress="changeStatus($event.id, 'in_progress')"
                                 @status_to_accepted="changeStatus($event.id, 'accepted')"
                                 @status_to_invoiced="changeStatus($event.id, 'invoiced')"
                                 @edit="shippingNoteModalId = $event.id"
                                 ref="table">

                    <template v-slot:expandedRow="{ row }">
                      <warehouse-shipping-note-positions :positions="JSON.parse(row.positions)" :hours-entries="JSON.parse(row.hoursEntries)"/>
                    </template>

                  </tt-table-crud>
                </tt-card>
              `, data() {
        return {
            window:                window,
            historyModal:          false,
            historyModalId:        null,
            shippingNoteModalId:   null,
            signingShippingNoteId: null
        }
    },
    mounted() {
        // check if get parameter doAction = createNew is set, if so open the modal with 'create' as id
        if (window.location.search.includes('doAction=createNew')) {
            this.shippingNoteModalId = 'create';
        }
    },
    methods: {
        async changeStatus(id, status) {
            const response = await axios.post(window.TT_CONFIG.BASE_PATH + '/WarehouseShippingNote/changeStatus', {id, status});
            if (response.data.success) {
                this.window.notify('success', response.data.message || 'Erfolgreich aktualisiert');
                this.$refs.table.$refs.table.refreshTable();
            } else {
                this.window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten');
            }
        },
    }
})