window['TT_CONFIG']['CRUD_CONFIG']['editCondition'] = (row) => {
    return row.cancelled === 0 && (!row.linkedOrderIds || row.linkedOrderIds.length === 0);
}

window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"] = [
    ...window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"],
    {
        key: "cancelRequest",
        title: "Bestellwunsch stornieren",
        class: "fas fa-ban text-danger", // Instead of fa-times, use a ban icon
        condition: (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.cancelled === 0,
    },
    {
        key: "uncancelRequest",
        title: "Bestellwunsch wiederherstellen",
        class: "fas fa-undo text-warning", // Use an undo icon for restore, with a warning color
        condition: (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.cancelled === 1,
    },
    {
        key: "addOrderToCart",
        title: "Bestellung in den Warenkorb",
        class: "fas fa-shopping-cart text-primary", // Use shopping-cart to indicate order creation
        condition: (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1'
            && row.cancelled === 0 && (!row.linkedOrderIds || row.linkedOrderIds.length === 0)
            && JSON.parse(row.positions).filter(position => position.articleId_text).length === 0,
    },
    {
        key: "doneOrder",
        title: "Bestellwunsch erledigt",
        class: "fas fa-check-circle text-success", // Use check-circle for marking as done
        condition: (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.done === 0,
    },
    {
        key: "undoneOrder",
        title: "Bestellwunsch wieder offen",
        class: "fas fa-redo-alt text-info", // Use redo-alt to indicate reopening the order
        condition: (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.done === 1,
    },
];

Vue.component('add-log-modal', {
    props: {
        orderRequestId: {type: Number, required: true},
        type: {type: String, default: 'accept'}
    },
    data() {
        return {
            orderRequest: null,
            note: '',
        };
    },
    async mounted() {
        const response = await axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrderRequest/getById`, {params: {id: this.orderRequestId}});
        this.orderRequest = response.data;

        if (this.orderRequest.cancelled === 1) {
            this.$emit('close');
            window.notify('error', 'Bestellwunsch wurde storniert');
        }
    },
    methods: {
        async submit() {
            const response = await axios.post(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrderRequest/createNewLogAction`, {
                orderRequestId: this.orderRequestId,
                note: this.note,
            });

            if (response.data.success) {
                this.$emit('close');
                window.notify('success', 'Log-Eintrag erstellt');
            } else {
                window.notify('error',
                    response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
            }
        }
    },
    template: `
      <tt-modal :show="true" :delete="false" @submit="submit" @update:show="$emit('close')" title="Status ändern">
        <tt-loader :absolute="false" v-if="!orderRequest"/>
        <template v-else>
          <tt-textarea label="Bemerkung*" v-model="note" sm/>
        </template>
      </tt-modal>

    `
})

Vue.component('order-request-log', {
    props: {orderRequestId: {type: Number, required: true}},
    data: () => ({
        logs: []
    }),
    async mounted() {
        const [{data: logs}, {data: order}] = await Promise.all([
            axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrderRequest/getLogById`, {params: {orderRequestId: this.orderRequestId}}),
            axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrderRequest/getById`, {params: {id: this.orderRequestId}})
        ]);
        this.logs = logs;

        if (typeof order.linkedOrderIds === 'string') try {
            order.linkedOrderIds = JSON.parse(order.linkedOrderIds);
        } catch {
            order.linkedOrderIds = [];
        }

        if (!order.linkedOrderIds?.length) return;

        const linkedLogs = (await Promise.all(
            order.linkedOrderIds.map(async id => {
                const [{data: order}, {data: orderLogs}] = await Promise.all([
                    axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getById`, {params: {id}}),
                    axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getLogById`, {params: {id}})
                ]);
                return orderLogs.map(log => ({...log, message: `${order.orderNumber} - ${log.message}`}));
            })
        )).flat();

        this.logs = [...logs, ...linkedLogs].sort((a, b) => b.create - a.create);
    }
    ,
    methods: {
        formatDate: date => window.moment(date * 1000).format('DD.MM.YYYY HH:mm'),
        getUserName: id => window.TT_CONFIG.CRUD_CONFIG.columns.find(col => col.key === 'createBy')?.modal.items.find(u => u.value === id)?.text
    },
    //language=Vue
    template: `
      <div>
        <template v-if="logs.length > 0">
          <hr>
          <h3>Log</h3>
          <div v-for="log in logs" :key="log.id" class="alert alert-light">
            {{ formatDate(log.create) }} ({{ getUserName(log.createBy) }}) | {{ log.message }}
          </div>
        </template>
      </div>
    `
})


Vue.component('linked-order-status', {
    props: ['linkedOrders'],
    data: () => ({
        orders: [],
        statusTranslations: {
            new: 'Neu',
            accepted: 'Akzeptiert',
            ordered: 'Bestellt',
            sent: 'Versendet',
            partiallyDelivered: 'Teilweise geliefert',
            fullyDelivered: 'Geliefert',
            cancelled: 'Storniert',
        }
    }),
    async mounted() {
        this.orders = await Promise.all(
            JSON.parse(this.linkedOrders).map(id => axios.get(`${window.TT_CONFIG.BASE_PATH}/WarehouseOrder/getById?id=${id}`).then(response => response.data))
        );
    },
    //language=Vue
    template: `
      <div>
                  <span v-for="(order, index) in orders" :key="order.id" :class="{ 'mt-1': index > 0 }"
                        class="badge badge-pill badge-primary mr-1">{{ order.orderNumber }} - {{ statusTranslations[order.status] }}</span>
      </div>`
});

Vue.component('warehouse-order-request-detail', {
    props: {
        positions: {
            type: Array,
            required: true
        }
    },
    //language=Vue
    template: `
      <div style="display: flex; justify-content: center; margin-bottom: 10px">
        <div class="WarehouseOrderRequestDetailTable">
          <div>ARTIKEL</div>
          <div>MENGE</div>
          <div>ZWECK</div>
          <template v-for="position in positions">
            <div>
              <tt-resolver v-if="position.articleId" reference="WarehouseArticle" :value="position.articleId"/>
              <span v-else>{{ position.articleId_text }}</span>
            </div>
            <div>{{ position.amount }}</div>
            <div>{{ position.purpose }}</div>
          </template>
        </div>
      </div>
    `
});


Vue.component('warehouse-order-request', {
    //language=Vue
    template: `
      <tt-card>
        <tt-table-crud @openHistory="openHistory"
                       @cancelRequest="cancelRequest"
                       @uncancelRequest="uncancelRequest"
                       @doneOrder="doneOrder"
                       @undoneOrder="undoneOrder"
                       @createLog="createLog"
                       @createOrder="createOrder"
                       @addOrderToCart="addOrderToCart"
                       ref="crud">
          <template #table-top-buttons>
            <tt-tooltip :text="createOrdersButtonToolTipText">
                <tt-button 
                    :disabled="orderShoppingCart.length === 0"
                    @click="createOrder"
                    additional-class="btn-outline-success text-center"
                    :text="createOrdersButtonText" icon="fas fa-shopping-cart"/>
            </tt-tooltip>
          </template>
          
          <template #linkedorderids="{row}">
            <linked-order-status :linkedOrders="row.linkedOrderIds" v-if="row.linkedOrderIds"/>
          </template>
          <template #expandedRow="{row}">
            <warehouse-order-request-detail :positions="JSON.parse(row['positions'])"/>
            <order-request-log :orderRequestId="row.id"/>
            <hr>
            <h4>Notiz</h4>
            <span>{{ row.note }}</span>
          </template>
        </tt-table-crud>
        <warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
        <add-log-modal v-if="addLogModalId"
                       :orderRequestId="addLogModalId"
                       @close="addLogModal = false; addLogModalId = null; $refs.crud.$refs.table.refreshTable()"/>
      </tt-card>
    `,
    data: () => ({
        window,
        historyModal: false,
        historyModalId: null,
        addLogModal: false,
        addLogModalId: null,
        showHiddenRequests: false,
        showCanceledRequests: false,
        orderRequestModalId: null,
        orderShoppingCart: [],
    }),
    methods: {
        openHistory(e) {
            this.historyModal = true;
            this.historyModalId = e.id;
        },
        async cancelRequest(row, cancel = '1') {
            if (!confirm('Bestellwunsch wirklich stornieren?')) return;
            const res = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WarehouseOrderRequest/cancel?id=${row.id}&cancel=${cancel}`);
            window.notify(res.data.success ? 'success' : 'error',
                res.data.message || (res.data.success ? 'Erfolgreich aktualisiert' : 'Fehler beim aktualisieren'));
            if (res.data.success) this.$refs.crud.$refs.table.refreshTable();
        },
        async doneRequest(row, done) {
            if (!confirm('Bestellwunsch wirklich als erledigt markieren?')) return;
            const res = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WarehouseOrderRequest/done?id=${row.id}&done=${done}`);
            window.notify(res.data.success ? 'success' : 'error',
                res.data.message || (res.data.success ? 'Erfolgreich aktualisiert' : 'Fehler beim aktualisieren'));
            if (res.data.success) this.$refs.crud.$refs.table.refreshTable();
        },
        async doneOrder(row) {
            this.doneRequest(row, '1');
        },
        async undoneOrder(row) {
            this.doneRequest(row, '0');
        },
        async createLog(row) {
            this.addLogModal = true;
            this.addLogModalId = row.id;
        },
        uncancelRequest(row) {
            this.cancelRequest(row, '0');
        },
        async createOrder() {
            if (this.orderShoppingCart.length > 0) {
                localStorage.setItem('WarehouseOrder_create', JSON.stringify(this.orderShoppingCart));
                window.location.href = `${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder`;
            } else window.notify('warning', 'Warenkorb ist leer');
        },
        async addOrderToCart(row) {
            const res = await axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrderRequest/getById?id=${row.id}`);
            if (res.data?.positions && typeof res.data.positions === 'string') {
                this.orderShoppingCart.push(res.data);
                window.notify('success', 'Bestellung in den Warenkorb gelegt');
            } else window.notify('error', res.data.message || 'Fehler beim hinzufügen der Bestellung');
        }
    },
    computed: {
        createOrdersButtonText: function () {
            return this.orderShoppingCart.length > 0 ? `${this.orderShoppingCart.length} Bestellung(en) erstellen` : 'Bestellung(en) erstellen';
        },
        createOrdersButtonToolTipText: function () {
            return this.orderShoppingCart.length > 0 ? `Erstellt ${this.orderShoppingCart.length} Bestellung(en)` : 'Keine Bestellung im Warenkorb';
        }
    }
});