import { h, Html } from 'lib/rx'
import * as rx from 'lib/rx'

interface Params {
    header: Html
    body: Html
    onClose: () => void
    className?: string
    onmount?: (element: Element) => void
    onunmount?: (element: Element) => void
}

export function view({ header, body, onClose, className, onmount, onunmount }: Params): Html {
    return rx.withState<boolean>(false, closingVar => {
        const onKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') onClose()
        }

        return h('div',
            { className: closingVar.map(isClosing => `g-Modal ${className ?? ''} ${isClosing ? 'g-Modal--Fade' : ''}`),
              onmousedown: () => onClose(),
              onmount: (element: Element) => {
                  document.addEventListener('keydown', onKeyDown)
                  if (onmount) onmount(element)
              },
              onunmount: (element: Element) => {
                  document.removeEventListener('keydown', onKeyDown)
                  if (onunmount) onunmount(element)
              }
            },
            h('div',
                { className: 'g-Modal__Content',
                  onmousedown: (e: Event) => e.stopPropagation()
                },
                h('div',
                    { className: 'g-Modal__Header' },
                    header,
                    h('button',
                       { className: 'g-Modal__Close',
                         onclick: onClose
                       },
                      '✕'
                    )
              ),
              h('div',
                  { className: 'g-Modal__Body' },
                  body
              )
            )
        )
    })
}

interface ErrorParams {
    header: string
    message: string
    onClose: () => void
}

export function error({ header, message, onClose }: ErrorParams): Html {
    return view({
        header,
        body: h('div', { className: 'g-Modal__ContentError' }, message),
        onClose,
        className: 'g-Modal--Danger'
    })
}