let can = document.createElement("canvas");
let ctx = can.getContext('2d');
let result;
const downloadButton = document.querySelector('#download');

function filterImage(svgDataUrl, width, height) {
    const filteredImage = new Image();
    const resultPreview = document.querySelector('#result_img')

    can.width = width;
    can.height = height;

    filteredImage.onload = function () {
        ctx.drawImage(filteredImage, 0, 0, width, height);
        result = can.toDataURL();
        downloadButton.disabled = false;
        resultPreview.src = result;
    };
    filteredImage.src = svgDataUrl;
}

function loadImage(base64Image) {
    const sourceImage = new Image();
    const svg = document.querySelector('svg')
    const svgImage = svg.querySelector('image')
    const sourcePreview = document.querySelector('#source_img')
    let svgDataUrl;

    sourceImage.onload = function () {
        let svgWidth = this.width;
        let svgHeight = this.height;

        if (this.height > 1000) {
            svgHeight = 1000;
            svgWidth = 1000 * this.width / this.height;
        }

        svg.setAttribute("height", svgHeight);
        svg.setAttribute("width", svgWidth);

        let svgString = (new XMLSerializer).serializeToString(svg);
        svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);

        filterImage(svgDataUrl, this.width, this.height);
    };
    sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
}


function handleFileSelect(e) {
    const files = e.target.files;
    if (!files || !files.length) return;
    const file = files[0];
    if (!file.type.match('image.*')) return;

    const reader = new FileReader();

    reader.onload = (readerEvent) => {
        loadImage(readerEvent.target.result);
    };

    reader.readAsDataURL(file);
}

document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);

function downloadURI(_uri, _name) {
    let link = document.createElement("a");
    link.download = 'distortedImageEH22.png';
    link.href = result;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
}

downloadButton.addEventListener('click', downloadURI);

(async () => {
    let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
        .then(r => r.blob());

    let dataUrl = await new Promise(resolve => {
        let reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.readAsDataURL(exampleImageBlob);
    });

    loadImage(dataUrl);
})()