const backend_api = '/zetikettes/srv/';

const zetikettes = [
    {
        'title': 'Aromate thym',
        'sticker': 'Aromate - Thym.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'lot': '0722-2',
            'qty': '40',
        },
        'landscape': false,
    },
    {
        'title': 'Chocolat lavande',
        'sticker': 'Chocolat - Lavande.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'lot': '0722-2',
            'qty': '100',
        },
        'landscape': false,
    },
    {
        'title': 'Gelée de cassis',
        'sticker': 'Gelée - Cassis.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'fruit': '80g',
            'teneur': '50%',
            'lot': '0722-2',
            'qty': '370',
        },
        'landscape': true,
    },
    {
        'title': 'Pesto ail des ours',
        'sticker': 'Pesto - Ail des Ours - 100% Olive.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'lot': '0722-2',
            'qty': '150',
        },
        'landscape': true,
    },
    {
        'title': 'Sel salade sans basilic',
        'sticker': 'Sel - Salade - Sans Basilic.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'lot': '0722-2',
            'qty': '40',
        },
        'landscape': true,
    },
    {
        'title': 'Sirop de cassis',
        'sticker': 'Sirop - Cassis.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'lot': '0722-2',
            'qty': '75',
        },
        'landscape': false,
    },
    {
        'title': 'Tisane digestion',
        'sticker': 'Tisane - Digestion.svg',
        'subs': {
            'dluo': 'décembre 2023',
            'lot': '0722-2',
            'qty': '25',
        },
        'landscape': false,
    },
];

$(document).ready(() => {
    const appbody = $("#appbody");
    for (let zett of zetikettes) {
        const block = $('<div class="section">');
        for (let sub in zett.subs) {
            block.append($(`<div class="input-field"><label class="active">${sub}</label><input type="text" name="${sub}" value="${zett.subs[sub]}">`));
        }
        const loader = $('<div class="progress"><div class="indeterminate"></div></div>')
            .hide();

        const action = $('<div class="section">')
            .append($('<a class="btn">generate<a>')
                .click(() => {
                    const subs = block.find(':text')
                        .toArray()
                        .reduce((obj, el) => ({...obj, [el.name]: el.value}), {});
                    const req = {
                        sticker: zett.sticker,
                        subs,
                        landscape: zett.landscape,
                    };

                    loader.show();
                    $('.btn').addClass("disabled");

                    $.post(backend_api, JSON.stringify(req))
                        .then(data => {
                            console.log(data);
                            const pdfbtn = $(`<a class="btn" href="${backend_api}/data/${data.file}" target="_blank">open pdf</a>`);
                            action.append(pdfbtn);
                        })
                        .catch(err => {
                            console.log(err);
                        })
                        .always(() => {
                            loader.hide();
                            $('.btn').removeClass('disabled');
                        });
                })
            .append(loader));

        appbody
            .append($('<li>')
                .append($(`<div class="collapsible-header"><h6 class="blue-text">${zett.title}</h6></div>`))
                .append($('<div class="collapsible-body">')
                    .append(block)
                    .append(action)));
    }

    $('.collapsible').collapsible();
});