export interface Action {
    label: string
    action: () => void
}

export interface ActionPaletteConstructor {
    root: HTMLDivElement
    actions: Action[]
}

/**
 * ActionPalette is a draggable pane that contains a list of buttons.
 * Each button triggers an action when clicked.
 */
export default class ActionPalette {

    constructor(opts: ActionPaletteConstructor) {
        const { root, actions } = opts

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

        container.style.display = 'flex'
        container.style.flexDirection = 'column'
        container.style.alignItems = 'flex-start'
        container.style.padding = '5px'
        container.style.width = 200 + 'px'

        actions.forEach(action => {
            const button = document.createElement('button')
            button.innerText = action.label
            button.style.margin = '5px'
            button.style.width = '90%'
            button.style.height = '30px'
            button.addEventListener('click', () => {
                action.action()
                // emit a 'render' event to trigger a render
                // this is useful for actions modifying the model's state
                window.dispatchEvent(new Event('render'))
                
            })
            container.appendChild(button)
        })

        root.appendChild(draggable)
    }
}