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

export type CardConfig = {
    display?: string
}

@customElement('cobalt-card')
export class Card extends LitElement {
    static override styles = css`
        .card-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .card {
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 50%;
            box-shadow: 3px 3px 8px 0 rgba(156, 156, 156, 1);
        }

        .label {
            padding: 7px;
            border-bottom: 1px solid #ddd;
            font-size: 1.2em;
            font-weight: 500;
        }

        .content {
            padding: 7px;
        }
    `

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

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

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

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

    override render() {
        return html`
            <div class="card-wrapper">
                <div class="card">
                    <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>
            </div>
        `
    }
}
