import { fullscreen } from "./fullscreen.js";
import { product } from "./product.js";

export class product_fullscreen extends fullscreen {
    #target;

    constructor(target) {
        super();

        this.#target = target;
    }

    get target() {
        return this.#target;
    }

    _build_node() {
        const container = document.createElement("div");
        container.classList.add("product-fullscreen-viewer");

        const image = document.createElement("div");
        image.style.backgroundImage = "url(\"" + this.target.image + "\")";
        image.classList.add("image");
        container.appendChild(image);

        const title = document.createElement("div");
        title.classList.add("title");
        container.appendChild(title);

        const title_content = document.createElement("h1");
        title_content.innerText = this.target.name;
        title.appendChild(title_content);

        const bottom = document.createElement("div");
        bottom.classList.add("bottom-side");
        container.appendChild(bottom);

        const bottom_header = document.createElement("div");
        bottom_header.classList.add("bottom-header");
        bottom.appendChild(bottom_header);
        
        const barcode_icon = document.createElement("span");
        barcode_icon.classList.add("material-icons");
        barcode_icon.innerText = "qr_code_scanner";

        const barcode_content = document.createElement("span");
        barcode_content.innerText = this.target.barcode;
        barcode_content.classList.add("numbers");

        const barcode = document.createElement("p");
        barcode.appendChild(barcode_icon);
        barcode.appendChild(barcode_content);
        bottom_header.appendChild(barcode);
        
        const author_icon = document.createElement("span");
        author_icon.classList.add("material-icons");
        author_icon.innerText = "attribution";

        const author_content = document.createElement("span");
        author_content.innerText = this.target.author;

        const author = document.createElement("p");
        author.appendChild(author_icon);
        author.appendChild(author_content);
        bottom_header.appendChild(author);

        const description = document.createElement("div");
        description.classList.add("description");
        bottom.appendChild(description);

        const description_content = document.createElement("p");
        description_content.innerText = this.target.description;
        description.appendChild(description_content);

        const close_button = document.createElement("button");
        close_button.classList.add("material-icons");
        close_button.classList.add("close");
        close_button.innerText = "close";
        container.appendChild(close_button);

        close_button.addEventListener("click", () => {
            this.hide();
        });

        return container;
    }
}