const { DOMElement } = require("ui/dom/domelement.js")
const { Label } = require("ui/dom/label")
const { BoxLayout } = require("ui/layout/box")


class LayoutPlaceholder extends DOMElement {
    constructor(text, color) {
        super("div")

        this.nameLabel = new Label(text)
        this.nameLabel.setStyle({
            fontSize: "9pt",
            textAlign: "center"
        })
        this.dimensionLabel = new Label()
        this.dimensionLabel.setStyle({
            fontSize: "9pt",
            textAlign: "center"
        })
        this.tagLayout = new BoxLayout("vertical", {padding: '2px'})
        this.tagLayout.setStyle({
            display:'block',
            position: 'relative',
            borderRadius: '3px',
            backgroundColor: "rgb(30,30,30)",
            color: "rgb(180,180,180)",
            width: '125px',
            height: '35px'
        })
        this.tagLayout.append(this.nameLabel, false, false, 15)
        this.tagLayout.append(this.dimensionLabel, false, false, 15)

        this.setStyle({
            backgroundColor: color
        })
        this.appendChild(this.tagLayout)
    }
}

module.exports = {
    LayoutPlaceholder: LayoutPlaceholder
}