import * as face from '../src/index';

let curIndex = 0;
face.load().then(() => {
    document.getElementById('loading')!.style.display = 'none';
});

// selectImage
document.getElementById('uploadImg')!.onchange = function () {
    selectImage(this);
};

function selected(list, index) {
    list.forEach(element => {
        element.classList.remove("border");
    });
    list[index].classList.add("border");
}

const allImg = document.querySelectorAll('img');
allImg.forEach(function (img) {
    img.addEventListener('click', function () {
        curIndex = +this.dataset['index'];
        console.log(curIndex, 'curIndex');
        selected(allImg, curIndex);
    })
});


function selectImage(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    const reader = new FileReader();
    reader.onload = function (evt) {
        const img = document.getElementById('image') as HTMLImageElement;
        if (evt.target && typeof evt.target.result === 'string') {
            img.src = evt.target.result;
        }
        img.onload = async function () {
            await face.run(img, (res) => {console.log(res)}, curIndex);
        };
    };
    reader.readAsDataURL(file.files[0]);
}