export interface DisplayVariable {
    name: string
    label: string
    tooltip?: string
}

export interface DisplayFieldConstructor {
    root: HTMLElement
    context: DisplayVariable[]
    title?: string
    id?: string
}

/**
 * Shows the value of variables in a draggable pane.
 */
export default class DisplayField {
    public context: DisplayVariable[]
    private refs: Map<string, HTMLDivElement> = new Map()

    constructor(opts: DisplayFieldConstructor) {
        this.context = opts.context

        const title = opts.title || 'Output'
        const container = document.createElement('div')
        const draggable = document.createElement('drag-pane')
        draggable.setAttribute('heading', title )
        draggable.setAttribute('key', title)
        draggable.appendChild(container)
        opts.root.appendChild(draggable)

        this.context.forEach( variable => {
            this.initDisplay(container, variable)
        })
    }

    public update(name: string, value: string|number|boolean): void {
        const ref = this.refs.get(name)
        if (ref) {
            ref.textContent = value.toString()
        }
    }

    // a display is a div that contains the value of a variable
    private initDisplay(container: HTMLDivElement, variable: DisplayVariable): void {
        const display = document.createElement('div')
        display.style.display = 'flex'
        display.style.flexDirection = 'row'
        display.style.justifyContent = 'space-between'
        display.style.alignItems = 'center'

        const label = document.createElement('label')
        label.textContent = variable.label
        label.style.marginRight = '10px'

        const value = document.createElement('div')
        value.textContent = ''
        this.refs.set(variable.name, value)

        display.appendChild(label)
        display.appendChild(value)
        container.appendChild(display)
    }
}