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

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

    get properties() {
        return {
            title: "Title of this row",
            show: false,
        };
    }

    get styles() {
        return `
            row-accordian > h1:hover {
                cursor: pointer;
                border-bottom: 0.07em solid #000;
            }

            row-accordian > h1 {
                display: inline-block;
                border-bottom: 0.07em solid rgba(0,0,0,0);
                -webkit-touch-callout: none; /* iOS Safari */
                -webkit-user-select: none; /* Safari */
                -khtml-user-select: none; /* Konqueror HTML */
                -moz-user-select: none; /* Old versions of Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none;
            }

            row-accordian > div {
                overflow: hidden;
            }

            row-accordian > div.hide > div {
                transition: 1.5s;
                margin-top: -100vh;
                opacity: 0;
            }

            row-accordian > div > div {
                margin-top: 0;
                opacity: 1;
            }
        `;
    }

    render() {
        return this.template
            .child(
                new h1(this.title)
                    .onClick(() => { this.show = !this.show }),
                new div(
                    new div(
                        new slot(this)
                    )
                ).class(this.show, (value) => { return value ? null : "hide" })
            );
    }
}

class RowAccordianTemplate extends IgniteTemplate {
    constructor(...params) {
        super(...params);

        this.tagName = "row-accordian";
    }
}

customElements.define("row-accordian", RowAccordian);

export {
    RowAccordianTemplate as RowAccordian
}