import { h, withState, withState2, Html } from 'lib/rx'
import * as request from 'request'
import * as modal from 'ui/modal'
import * as route from 'route'
import { Map } from 'models/map'
import * as form from 'lib/form'
import * as L from 'lib/loadable'
import * as layout from 'ui/layout'

export function view(): Html {
    return withState<L.Loadable<Array<Map>>>(L.loading, mapsVar => {
        request
            .get<Array<Map>>('/api/maps')
            .then(res => {
                res.sort((a, b) => a.name.localeCompare(b.name))
                mapsVar.update(_ => L.loaded(res))
            })
            .catch(({ message }) => L.failure(message))

        return h('div',
            { className: 'g-Maps' },
            withState<boolean>(false, showVar => [
                h('button',
                    { className: 'g-Button g-Button--Primary',
                      onclick: (event: Event) => showVar.update(_ => true)
                    },
                    'Nouvelle carte'
                ),
                showVar.map(show => {
                    if (show) {
                        return createModal({
                            onClose: () => showVar.update(_ => false)
                        })
                    }
                })
            ]),
            mapsVar.map(loadable => layout.loadable(loadable, maps => h('ul', maps.map(viewMap))))
        )
    })
}

function viewMap(m: Map): Html {
    const url = route.toString(route.map({ id: m.id }))

    return h('li',
        h('a', { href: url }, m.name)
    )
}

// Create map

interface CreateParams {
    onClose: () => void,
}

function createModal({ onClose }: CreateParams): Html {
    return modal.view({
        header: 'Nouvelle carte',
        body: withState2<string, L.Loadable<void>>(['', L.init], (nameVar, requestVar) =>
            h('form',
                {
                    onsubmit: nameVar.map(name => (event: Event) => {
                        event.preventDefault()
                        requestVar.update(_ => L.loading)

                        request
                            .post<Map>('/api/maps', JSON.stringify({ name }))
                            .then(map => {
                                requestVar.update(_ => L.loaded(undefined))
                                route.push(route.map({ id: map.id }))
                            })
                            .catch(({ message }) => requestVar.update(_ => L.failure(message)))
                    })
                },
                form.input({
                    label: 'Nom',
                    select: true,
                    onUpdate: value => {
                        nameVar.update(_ => value)
                        requestVar.update(_ => L.init)
                    },
                    required: true
                }),
                form.error(requestVar),
                form.submit({
                    label: 'Créer',
                    className: 'g-Button--FullWidth',
                    requestVar
                })
            )
        ),
        onClose: onClose
    })
}