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

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

    get styles() {
        return /*css*/`
            mt-drawer > div {
                position: relative;
                background-color: #f8f9fa;
            }

            mt-drawer > div.absolute {
                position: absolute;
            }

            mt-drawer > div.left {
                left: 0;
                top: 0;
                height: 100vh;
            }

            mt-drawer > div.right {
                right: 0;
                top: 0;
                height: 100vh;
            }

            mt-drawer > div.top {
                top: 0;
                left: 0;
                width: 100vw;
            }

            mt-drawer > div.bottom {
                bottom: 0;
                left: 0;
                width: 100vw;
            }

            mt-drawer > div.show {
                display: flex;
                flex-direction: column;
            }

            mt-drawer > div {
                display: none;
            }
        `;
    }

    get properties() {
        return {
            show: true,
            responsiveClasses: "d-none d-md-flex",
            position: "left",
            width: "20em",
            height: null,
            padding: "1em",
            absolute: true
        };
    }

    render() {
        return this.template
            .child(
                new div()
                    .class(this.responsiveClasses)
                    .class(this.show, (value) => { return value ? "show" : null })
                    .class(this.absolute, (value) => { return value ? "absolute" : null })
                    .class(this.position)
                    .style("width", this.width)
                    .style("height", this.height)
                    .style("padding", this.padding)
                    .child(new button().class("btn btn-none").child("<i class='fas fa-chevron-left'></i>"))
                    .child(new slot(this))
            );
    }
}

class DrawerTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-drawer", children);
    }
}

export {
    DrawerTemplate as Drawer
};

customElements.define("mt-drawer", Drawer);