export class pre extends HTMLPreElement {
    constructor() {
        super()
    }
    static text(text) {
        const pre = new this()
        pre.textContent = text
        pre.style.backgroundColor = '#eee'
        pre.style.padding = '1rem'
        return pre
    }
    w(width) {
        this.style.width = `${width}px`
        return this
    }
    h(height) {
        this.style.height = `${height}px`
        return this
    }
}

export class div extends HTMLDivElement {
    constructor({ width = 0, height = 0 }) {
        super()
        this.style.width = `${width}px`
        this.style.height = `${height}px`
    }

    static w(width) {
        return new this({ width })
    }
    static h(height) {
        return new this({ height })
    }
    static m(margin) {
        return new this({ margin })
    }
    static p(padding) {
        return new this({ padding })
    }
    static absolute(absolute) {
        return new this({ absolute })
    }
    static relative(relative) {
        return new this({ relative })
    }

    w(width) {
        this.style.width = `${width}px`
        return this
    }
    h(height) {
        this.style.height = `${height}px`
        return this
    }
    m(margin) {
        this.style.margin = margin
        return this
    }
    p(padding) {
        this.style.padding = padding
        return this
    }

    absolute({ top, left, right, bottom }) {
        this.style.position = 'absolute'
        if (top) this.style.top = top + 'px'
        if (left) this.style.left = left + 'px'
        if (right) this.style.right = right + 'px'
        if (bottom) this.style.bottom = bottom + 'px'
        return this
    }
    relative({ top, left, right, bottom }) {
        this.style.position = 'relative'
        if (top) this.style.top = top + 'px'
        if (left) this.style.left = left + 'px'
        if (right) this.style.right = right + 'px'
        if (bottom) this.style.bottom = bottom + 'px'
        return this
    }
    transition({ }) {
        return this
    }
    text(text) {
        this.textContent = text
        return this
    }
    click(callback) {
        this.onclick = callback
        return this
    }
    childrens(childrens) {
        childrens.forEach(element => {
            this.appendChild(element)
        })
        return this
    }
    //static get onclick() {
    //    console.log('onclick event')
    //    return {
    //        stop: function (event) {
    //            console.log(`Stop event: ${event}`)
    //            return div
    //        }
    //    }
    //}

    static get onkeydown() {
        console.log('onkeydown event')
        return {
            esc: function () {
                console.log('esc event')
                return {
                    keydown: function () {
                        console.log('keydown event')
                        return div
                    }
                }
            }
        }
    }

    static classList(classes) {
        console.log(`Classes: ${classes}`)
        return this
    }
}

customElements.define('my-div', div, { extends: 'div' })
customElements.define('my-pre', pre, { extends: 'pre' })

//
//export class button extends div { }
//export class span extends div { }
//
//export class header extends div { }
//export class footer extends div { }
//export class main extends div { }
//

export default { div, pre }