import { h, Html } from 'lib/rx'
import * as rx from 'lib/rx'
import * as request from 'request'
import * as route from 'route'
import { User } from 'models/user'
import * as modal from 'ui/modal'

export function view(user: User, children: Html): Html {
    return [
        h('header',
            h('a', { href: '/' }, 'Maps'),
            h('div',
                user.name,
                rx.withState<string | undefined>(undefined, logoutError => [
                    h('button',
                        {
                            className: 'g-Logout__Button',
                            onclick: (event: Event) => {
                                request
                                    .post_('/api/logout')
                                    .then(_ => window.location.href = '')
                                    .catch(({ message }) => logoutError.update(_ => message))
                            }
                        },
                        '(Déconnexion)'
                    ),
                    logoutError.map(err => err && modal.error({
                        header: 'Erreur lors de la déconnexion',
                        message: err,
                        onClose: () => logoutError.update(_ => undefined)
                    }))
                ])
            )
        ),
        h('main', children)
    ]
}