import { h } from 'lib/h'

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

export function show(event: MouseEvent, actions: Action[]) {
  const menu = h('div',
    { id: 'g-ContextMenu',
      style: `left: ${event.pageX.toString()}px; top: ${event.pageY.toString()}px`
    },
    ...actions.map(({ label, action }) =>
      h('div',
        { className: 'g-ContextMenu__Entry',
          onclick: () => action()
        },
        label
      )
    )
  )

  document.body.appendChild(menu)

  // Remove on click or context menu
  setTimeout(() => {
    const f = () => {
      document.body.removeChild(menu)
      document.body.removeEventListener('click', f)
      document.body.removeEventListener('contextmenu', f)
    }
    document.body.addEventListener('click', f)
    document.body.addEventListener('contextmenu', f)
  }, 0)
}