class Face {
    constructor(id) {
        this.id = id;
        this.value = 0;
        // this.name = name;
        this.imgEls = [];
        this.valueEls = [];

        this.img = "";

        let els = document.querySelectorAll(`[data-face='${this.id}']`);
        for(let el of els) {
            if(el.tagName == 'IMG') {
                this.imgEls.push(el);
            } else {
                this.valueEls.push(el);
            }
        }
    }

    addImgEl(el) {
        this.imgEls.push(el)
    }

    addValueEl(el) {
        this.valueEls.push(el)
    }

    update(imgUrl, value) {
        this.img = imgUrl
        for(let el of this.valueEls) {
            el.textContent = new Intl.NumberFormat("nl").format(value);
        }
        for(let el of this.imgEls) {
            el.src = '/output/'+imgUrl;
        }
    }
}

class Bar {
    constructor(el) {
        this.el = el;
        this.values = {};
    }

    setValue(id, value) {
        this.values[id] = value;
        this.update();
    }

    update() {
        for(let id in this.values) {
            let el = document.getElementById('graph--' + id);
            if(!el) continue;

            let nrEls = el.getElementsByClassName('nr');
            for(let nrEl of nrEls) {
                nrEl.textContent =  new Intl.NumberFormat("nl").format(this.values[id]);
            }

            el.style.flex = parseInt(this.values[id]);
        }
    }

}

class CompositeImage {
    constructor(elId, face1, face2) {
        this.el = document.getElementById(elId);
        this.face1 = face1;
        this.face2 = face2;
    }

    update() {
        this.el.src = `/composite/${this.face1.img}/${this.face2.img}`;
    }
}

var bar = new Bar(document.getElementById('graph'));

var faces = {
    'front': new Face('front'),
    'side': new Face('side'),
    'male_front': new Face('male_front'),
    'female_front': new Face('female_front'),
    'unknown_front': new Face('unknown_front'),
    'male_side': new Face('male_side'),
    'female_side': new Face('female_side'),
    'unknown_side': new Face('unknown_side')
}

var composites = [
    new CompositeImage('composite-male_front', faces['male_front'], faces['front']),
    new CompositeImage('composite-male_side', faces['male_side'], faces['side']),
    new CompositeImage('composite-unknown_front', faces['unknown_front'], faces['front']),
    new CompositeImage('composite-unknown_side', faces['unknown_side'], faces['side']),
    new CompositeImage('composite-female_front', faces['female_front'], faces['front']),
    new CompositeImage('composite-female_side', faces['female_side'], faces['side']),
];

var update = function() {
    let req = new XMLHttpRequest();
    req.addEventListener("load", function(e){
        let data = JSON.parse(this.responseText);
        console.log(data);
        for(let name in data){
            faces[name].update(data[name]['img'], data[name]['count']);
        }

        for(let composite of composites) {
            composite.update();
        }

        bar.setValue('male', data['male_front']['count'] + data['male_side']['count'])
        bar.setValue('female', data['female_front']['count'] + data['female_side']['count'])
        bar.setValue('unknown', data['unknown_front']['count'] + data['unknown_side']['count'])
    });
    req.open("GET", "/output/composites.json?v=" + Date.now());
    req.send();
}

var socket = new ReconnectingWebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws")
socket.addEventListener('message', function (event) {
    //trigger update
    update();
});

update();