const App = {
    setup() {
        const state = Vue.reactive({
            number: '',
            deliveryDate: new Date(),
            referenceNumber: '',
            pdfTransactionList: [],
            company: {
                name: '',
                emailAddress: '',
                phoneNumber: '',
                street: '',
                city: '',
                state: '',
                zipCode: '',
                country: ''
            },
            companyAddress: '',
            customer: {
                name: '',
                street: '',
                city: '',
                state: '',
                zipCode: '',
                country: '',
                emailAddress: '',
                phoneNumber: ''
            },
            customerAddress: '',
            isDownloading: false,
            mappedItems: [],
            movementTotal: 0
        });

        const services = {
            getPDFData: async (id) => {
                try {
                    const response = await AxiosManager.get('/DeliveryOrder/GetDeliveryOrderSingle?id=' + id, {});
                    return response;
                } catch (error) {
                    throw error;
                }
            },
        };

        const methods = {
            populatePDFData: async (id) => {
                const response = await services.getPDFData(id);
                state.pdfData = response?.data?.content?.data || state.pdfData;
                state.pdfTransactionList = response?.data?.content?.transactionList || [];
                methods.bindPDFControls();
            },

            bindPDFControls: () => {
                const company = StorageManager.getCompany() || state.company;
                state.company = {
                    name: company.name,
                    emailAddress: company.emailAddress,
                    phoneNumber: company.phoneNumber,
                    street: company.street,
                    city: company.city,
                    state: company.state,
                    zipCode: company.zipCode,
                    country: company.country
                };
                state.companyAddress = [
                    company.street,
                    company.city,
                    company.state,
                    company.zipCode,
                    company.country
                ].filter(Boolean).join(', ');

                const pdfData = state.pdfData;
                state.customer = pdfData.salesOrder?.customer;
                state.customerAddress = [
                    state.customer.street,
                    state.customer.city,
                    state.customer.state,
                    state.customer.zipCode,
                    state.customer.country
                ].filter(Boolean).join(', ');

                state.number = pdfData?.number;
                state.deliveryDate = DateFormatManager.formatToLocale(state.deliveryDate);
                state.referenceNumber = pdfData?.salesOrder?.number;

                state.mappedItems = (state.pdfTransactionList || []).map(item => ({
                    warehouse: item.warehouse?.name || 'Unknown',
                    product: `${item.product?.number || ''} ${item.product?.name || ''}`.trim() || 'Unknown Product',
                    movement: item.movement || 0,
                }));

                let movementTotal = (state.pdfTransactionList || []).reduce((sum, item) => sum + (item.movement || 0), 0);
                state.movementTotal = NumberFormatManager.formatToLocale(movementTotal);
            }
        };

        const handler = {
            downloadPDF: async () => {
                state.isDownloading = true;
                await new Promise(resolve => setTimeout(resolve, 500));

                try {
                    const { jsPDF } = window.jspdf;
                    const doc = new jsPDF('p', 'mm', 'a4');
                    const content = document.getElementById('content');

                    await html2canvas(content, {
                        scale: 2,
                        useCORS: true
                    }).then(canvas => {
                        const imgData = canvas.toDataURL('image/png');
                        const imgWidth = 210;
                        const pageHeight = 297;
                        const imgHeight = (canvas.height * imgWidth) / canvas.width;
                        let position = 0;

                        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                        doc.save(`delivery-order-${state.pdfData.number || 'unknown'}.pdf`);
                    });
                } catch (error) {
                    console.error('Error generating PDF:', error);
                } finally {
                    state.isDownloading = false;
                }
            },
        };


        Vue.onMounted(async () => {
            try {
                await SecurityManager.authorizePage(['DeliveryOrders']);
                var urlParams = new URLSearchParams(window.location.search);
                var id = urlParams.get('id');
                await methods.populatePDFData(id ?? '');
            } catch (e) {
                console.error('page init error:', e);
            } finally {
                
            }
        });

        return {
            state,
            handler,
        };
    }
};

Vue.createApp(App).mount('#app');