import { h, Html } from 'lib/rx'
import * as rx 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'

export function view(mapInit: Map): Html {
    return h('footer',
        { className: 'g-Map__Footer' },
        rx.withState<Map>(mapInit, mapVar =>
            mapVar.map(map => [
                map.name,
                h('div',
                    { className: 'g-Map__FooterButtons' },
                    viewRenameButton(map, (map: Map) => mapVar.update(_ => map)),
                    viewDeleteButton(map)
                )
            ])
        )
    )
}

// Rename modal

function viewRenameButton(map: Map, onUpdate: (m: Map) => void): Html {
    return rx.withState<boolean>(false, showVar => [
        h('button',
            { className: 'g-Button',
              onclick: (event: Event) => showVar.update(_ => true)
            },
            'Renommer'
        ),
        showVar.map(show => {
            if (show) {
                return renameModal({
                    map,
                    onUpdate,
                    onClose: () => showVar.update(_ => false)
                })
            }
        })
    ])
}

interface RenameParams {
    map: Map,
    onUpdate: (m: Map) => void,
    onClose: () => void,
}

function renameModal({ map, onUpdate, onClose }: RenameParams): Html {
    const initName = map.name

    return modal.view({
        header: `Renommer la carte ${map.name}`,
        body: rx.withState2<string, L.Loadable<void>>([initName, L.init], (nameVar, requestVar) =>
            h('form',
                {
                    onsubmit: nameVar.map(name => (event: Event) => {
                        event.preventDefault()
                        requestVar.update(_ => L.loading)

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

// Delete modal

function viewDeleteButton(map: Map): Html {
    return rx.withState<boolean>(false, showVar => [
        h('button',
            { className: 'g-Button g-Button--Danger',
              onclick: (event: Event) => showVar.update(_ => true)
            },
            'Supprimer'
        ),
        showVar.map(show => {
            if (show) {
                return deleteModal({
                    map,
                    onClose: () => showVar.update(_ => false)
                })
            }
        })
    ])
}

interface DeleteParams {
    map: Map,
    onClose: () => void,
}

function deleteModal({ map, onClose }: DeleteParams): Html {
    const initName = ''

    return modal.view({
        className: 'g-Modal--Danger',
        header: `Supprimer la carte ${map.name} ?`,
        body: rx.withState2<string, L.Loadable<void>>([initName, L.init], (nameVar, requestVar) =>
            h('form',
                {
                    onsubmit: (event: Event) => {
                        event.preventDefault()
                        requestVar.update(_ => L.loading)

                        request
                            .del_(`/api/maps/${map.id}`)
                            .then(_ => {
                                requestVar.update(_ => L.loaded(undefined))
                                route.push(route.maps)
                            })
                            .catch(({ message }) => requestVar.update(_ => L.failure(message)))
                    }
                },
                h('p',
                    'Veuillez recopier le nom de la carte pour la supprimer : ',
                    h('b', map.name)
                ),
                form.input({
                    label: 'Nom',
                    initValue: initName,
                    select: true,
                    onUpdate: value => {
                        nameVar.update(_ => value)
                        requestVar.update(_ => L.init)
                    }
                }),
                form.error(requestVar),
                form.submit({
                    label: 'Supprimer',
                    className: 'g-Button--Danger g-Button--FullWidth',
                    disabled: nameVar.map(name => name != map.name),
                    requestVar
                })
            )
        ),
        onClose: onClose
    })
}