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

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

        .cobalt-row .row-item {
            flex: 1;
        }
    `

    @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-row">
                ${this.layoutChildren.map(x => this.renderItem(x))}
            </div>
        `
    }

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