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

export type GroupConfig = {
    display?: string
    backgroundColor?: string
    borderColor?: string
}

@customElement('cobalt-group')
export class Group extends LitElement {
    static override styles = css`
        .group-wrapper {
            padding: 7px;
        }

        .group-wrapper .content {
            border: 1px solid #999;
            border-radius: 7px;
            background: #cfcfcf;
        }
    `

    @property({ attribute: false })
    config: GroupConfig = {}

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

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

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

    override render() {
        return html`
            <div class="group-wrapper">
                <div class="label">${this.config.display || ''}</div>
                <div class="content">
                    <cobalt-layout
                        .plane=${this.plane}
                        .parentContext=${this.parentContext}
                        .layoutChildren=${this.layoutChildren}
                    ></cobalt-layout>
                </div>
            </div>
        `
    }
}
