const params = [
    ['dluo', 'DLUO', true],
    ['lot', 'Nº de lot', true],
    ['qty', 'Poids net (g)', true],
    ['teneur', 'Teneur en fruits (%)', false],
    ['fruit', 'Quantité de fruits pour 100g (g)', false],
]

function post() {
    const lemot = $('input[type=password]').val();
    const formdata = new FormData($('form')[0]);
    formdata.append('lemotdepasse', lemot);
    $.ajax({
        url: backend_api + `newtikette`,
        type: 'POST',
        data: formdata,

        contentType: false,
        processData: false,

        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                }, false);
            }
            return myXhr;
        }
    })
        .then(data => {
            console.log(data);
        })
        .catch(err => {
            console.log(err);
            if (err.status == 403) {
                M.toast({html: 'access denied'});
            } else if (err.status == 500) {
                M.toast({html: 'server error'});
            }
        })
        .always(() => {
            $('.progress').hide();
            $('.btn').removeClass('disabled');
        });
}

$(document).ready(async () => {
    const appbody = $("#appbody");
    const block = $('<form class="section">');
    block.append($(`<div class="input-field"><label class="active">Title</label>
                    <input type="text" name="title" value="Gelée de brandade aux cêpes biou">`));
    block.append($(`<div class="input-field"><label class="active">
                    <input type="checkbox" name="landscape"><span>landscape</span></label>`));
    const subst = $('<div class="section"><label class="active">Substitutions</label><p></p>');
    for (let param of params) {
        subst.append($(`<div><label class="active"><input type="checkbox" name="${param[0]}" ${param[2] ? 'checked': ''}>
                        <span>\${${param[0]}}: ${param[1]}</span></label>`));
    }
    block.append(subst);

    block.append(`<div class="file-field input-field">
    <div class="btn">
      <span>File</span>
      <input type="file" name="sticker" accept=".svg">
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Template .svg file">
    </div>
  `)

    const loader = $('<div class="progress"><div class="determinate"></div></div>')
        .hide();

    let setup = false;

    const action = $('<div class="section">')
        .append($('<a class="btn">add newtikette<a>')
            .click(() => {
                if (!setup) {
                    setup = true;
                    $('input[type=password]').on('keydown', e => {
                        if (e.keyCode == 13 && !e.repeat) {
                            $('.modal').modal('close');
                            post();
                        }
                    });
                    $("#pushgo").click(() => { post(); });
                }

                $('.modal').modal('open');
                $('input[type=password]').focus();

                loader.show();
                $('.btn').addClass("disabled");
                $('.modal-close').removeClass("disabled");

            })
            .append(loader));

    const lemotdepasse = $(`
    <div id="modal1" class="modal">
      <div class="modal-content">
        <h4>A lemotdepasse is needed</h4>
        <div class="input-field"><label class="active">lemotdepasse</label>
        <input type="password">
      </div>
      <div class="modal-footer">
        <a class="btn modal-close" id="pushgo">go</a>
      </div>
    `);

    appbody
        .append(lemotdepasse)
        .append(block)
        .append(action);

    $(".modal").modal();
});