import {css, html, LitElement} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {DataPlane} from '../../DataPlane'
import {LayoutSpec} from '../Layout'

@customElement('cobalt-col')
export class Column extends LitElement {
    static override styles = css`
        .cobalt-col {
            display: flex;
            flex-direction: column;
        }

        .cobalt-col .col-item {
        }
    `

    @property({ attribute: false })
    plane?: DataPlane

    @property({ attribute: false })
    layoutChildren?: LayoutSpec[]

    @property({ attribute: false })
    parentContext: Record<string, any> = {}

    override render() {
        if ( !this.layoutChildren ) {
            return html`...`
        }

        return html`
            <div class="cobalt-col">
                ${this.layoutChildren.map(x => this.renderItem(x))}
            </div>
        `
    }

    private renderItem(spec: LayoutSpec) {
        return html`
            <div class="col-item">
                <cobalt-layout
                    .plane=${this.plane}
                    .layoutChildren=${[spec]}
                    .parentContext=${this.parentContext}
                ></cobalt-layout>                
            </div>
        `
    }
}
