import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, div, img, input } from "../ignite-html/ignite-template.js";

class EditableImage extends IgniteElement {
    constructor() {
        super();
    }

    get styles() {
        return `
            mt-editable-image {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            mt-editable-image > img {
                width: 100%;
                max-width: 100%;
                max-height: 100%;
                height: auto;
                flex: 1;
            }

            mt-editable-image:hover:after {
                position: absolute;
                font-family: 'Font Awesome 5 Pro';
                font-weight: 900;
                content: '\\f332';
                color: #fff;
                font-size: 2.2em;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            mt-editable-image:hover {
                cursor: pointer;
                filter: brightness(0.9);
            }
        `;
    }

    get properties() {
        return {
            source: null,
            fileInput: null,
            onChange: null,
            objectFit: "contain",
            objectPosition: "center"
        };
    }

    render() {
        return this.template
            .onClick(() => this.onClick())
            .child(
                new img()
                    .src(this.source)
                    .style("object-fit", this.objectFit)
                    .style("object-position", this.objectPosition)
                    .hide(this.source, value => { return value == null; }),
                new input()
                    .type("file")
                    .style("display", "none", true)
                    .attribute("accept", "image/*")
                    .onChange((event) => this.onFileChange(event)).ref(this.fileInput)
            );
    }

    onFileChange(event) {
        //Get the uploaded file from the file input.
        var file = this.fileInput.files[0];

        //Create a reader to read in the file.
        var reader = new FileReader();
        reader.onload = (event) => {
            this.source = event.target.result;

            //If we have a on change event then invoke it.
            if (this.onChange != null) {
                this.onChange(this.source);
            }
        };

        //Read it.
        reader.readAsDataURL(file);
    }

    onClick() {
        this.fileInput.click();
    }
}

class EditableImageTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-editable-image", children);
    }
}

customElements.define("mt-editable-image", EditableImage);

export {
    EditableImageTemplate as EditableImage
};