fileInput.addEventListener('change', (event) => {

    saveOrder();

    //Checks if File already is added if not add to array or show popup card
    [...event.target.files].forEach(file => {
        if (getFileIndex(file, printFilesToUpload) == -1) {
            if (getFileIndex(file, filesToUpload) == -1) {
                if (filesToUpload.length <= 4) {
                    filesToUpload.push(file);
                } else {
                    renderCard('ToManyFiles')
                }
            }
        } else {
            renderCard('DuplicatedFile', file)
        }
    });

    //resets input and container
    fileInput.value = '';
    filesContainer.innerHTML = '';

    //Preview Them on page
    filesToUpload.forEach(file => {
        const reader = new FileReader(),
            outerElement = _doc.createElement('div'),
            overlayElement = _doc.createElement('div'),
            caption = _doc.createElement('p'),
            deleteElement = _doc.createElement('button');

        outerElement.classList.add('draggable', 'relative');
        outerElement.setAttribute('draggable', true);
        outerElement.setAttribute('id', getFileIndex(file, filesToUpload));

        overlayElement.classList.add('absolute', 'w-full', 'h-full');
        outerElement.appendChild(overlayElement);

        caption.innerHTML = file.name;
        outerElement.appendChild(caption);

        deleteElement.innerText = 'Remove';
        deleteElement.setAttribute('onclick', 'removeFile("file", ' + getFileIndex(file, filesToUpload) + ')');
        outerElement.appendChild(deleteElement);

        //checks if file is an image and previews the image
        if (['image/png', 'image/jpeg', 'image/gif'].indexOf(file.type) > -1) {
            reader.onload = () => {
                let element = _doc.createElement('img');
                element.setAttribute('src', reader.result);
                outerElement.insertBefore(element, caption);
            }
        } else

        //checks if file is an stl and previews the stl
        if (file.type == 'model/stl') {
            reader.onload = () => {
                const previewElement = _doc.createElement('div');
                previewElement.setAttribute('id', 'stl-file-' + getFileIndex(file, filesToUpload));
                outerElement.insertBefore(previewElement, caption);

                new StlViewer(_doc.getElementById('stl-file-' + getFileIndex(file, filesToUpload)), {
                    models: [{
                        id: 1,
                        filename: reader.result
                    }]
                });
            }
        } else {
            renderCard("InvalidFileType");
            return;
        }
        filesContainer.appendChild(outerElement);
        reader.readAsDataURL(file);
        RealoadDraggables()
    });
});


submitForm.addEventListener('submit', async (event) => {
    event.preventDefault();

    const response = await fetch("/products", {
        body: JSON.stringify({
            name: _doc.getElementsByName("name")[0].value,
            description: _doc.getElementsByName("description")[0].value,
            files: await convertToJson(filesToUpload),
            printFiles: await convertToJson(printFilesToUpload),
            isPrintedBySeller: _doc.getElementsByName("isPrintedBySeller")[0].checked
        }),
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": _doc.getElementsByName('_token')[0].value
        }
    });
    _doc.write(await response.text())
});

async function convertToJson(array) {
    console.log('Converting to json');
    let base = [];
    for(let file of array) {
        const buffer = await file.arrayBuffer();
        const base64 = btoa(
            new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
        base.push(base64);
    };

    const json = JSON.stringify(base);
    return json;
}