import { OneElement } from "/Components/OneElement/OneElement.js";
import { Logger } from "/Tooling/Logger/Logger.js";
import { Network } from "/Tooling/Network/Network.js";

class Image extends OneElement {

    _updateRendering() {
        this.innerHTML = '';
        this._resetSizeClass();

        let name = this.getAttribute("name")
        if (name) {
            this.addImage(name);
        } else {
            Logger.error(`Image not found ${name}`);
        }

    }

    addImage(name) {
        Network.getJSON('api/content/content.json', json => {
            let description = json["image_descriptions"][name];
            if (description) {
                this.addDescribedImage(name, description);
            } else {
                Logger.error(`No description for ${name}`);
            }
        });
    }

    addDescribedImage(name, description) {
        let img = document.createElement('img');
        img.setAttribute('src', `/resources/img/${name}`);
        img.setAttribute('alt', description);
        this.appendChild(img);
        this.addPotision();
    }

    addPotision() {
        let position = this.getAttribute("position")
        if (position) {
            this.classList.add(`position-${position}`);
        }
    }

}

if (!window.customElements.get('one-image')) {
    window.customElements.define('one-image', Image);
}

export { Image };