import { h } from 'lib/h'
import * as Button from 'lib/button'
import * as Form from 'lib/form'
import * as Layout from 'lib/layout'
import * as Modal from 'lib/modal'
import * as FontAwesome from 'lib/fontAwesome'
import * as AutoComplete from 'lib/autoComplete'

export function form(
  onValidate: (name: string, color: string, icon: string) => void,
  colors: string[],
  name: string,
  color: string,
  icon: string
): Element {
  const onSubmit = () => {
    onValidate(name, color, icon)
    Modal.hide()
  }
  const domIcon = h('div', { className: `fa fa-${icon}` })
  return h('div',
    {},
    Layout.section(
      {},
      h('form',
        { className: 'g-MarkerForm',
          onsubmit: (e: Event) => {
            e.preventDefault()
            onSubmit()
          }
        },
        Layout.section(
          {},
          Form.input(
            'g-MarkerForm__Name',
            'Name',
            { oninput: (e: Event) => {
                if (e.target !== null) {
                  name = (e.target as HTMLInputElement).value
                }
              },
              value: name
            }
          ),
          Form.colorInput(
            colors,
            'g-MarkerForm__Color',
            'Color',
            color,
            newColor => color = newColor
          ),
          h('div',
            { className: 'g-Form__Field' },
            h('div',
              { className: 'g-Form__Label' },
              h('label', { for: 'g-MarkerForm__IconInput' }, 'Icon')
            ),
            Layout.line(
              { className: 'g-MarkerForm__AutoCompleteAndIcon' },
              AutoComplete.create(
                { value: icon,
                  className: 'g-MarkerForm__AutoComplete'
                },
                'g-MarkerForm__IconInput',
                FontAwesome.icons,
                icon => h('div',
                  {},
                  h('div', { className: `g-MarkerForm__IconEntry fa fa-${icon}` }),
                  icon
                ),
                newIcon => {
                  icon = newIcon
                  domIcon.className = `fa fa-${icon}`
                }),
                h('div', { className: 'g-MarkerForm__Icon' }, domIcon)
              )
            )
          )
        ),
        Layout.line(
          {},
          Button.action({ onclick: () => onSubmit() }, 'Save'),
          Button.cancel(
            { onclick: () => Modal.hide(),
              type: 'button'
            },
            'Cancel'
          )
        )
      )
    )
}

// let create on_remove on_update colors pos init_name init_color init_icon =
//   let marker =
//     Leaflet.marker pos
//       { title = init_name
//       ; icon = Icon.create init_icon init_color
//       ; draggable = true
//       }
//   in
//
//   (* Context menu *)
//   let () = Leaflet.on marker 'contextmenu' (fun event ->
//     ContextMenu.show
//       (Leaflet.original_event event)
//       [| { label = 'Modify'
//          ; action = fun _ ->
//            Modal.show (form (on_update pos pos) colors init_name init_color init_icon)
//          }
//       ;  { label = 'Remove'
//          ; action = fun _ -> on_remove pos
//          }
//       |])
//   in
//
//   (* Move the cursor on drag *)
//   let () = Leaflet.on marker 'dragend' (fun e ->
//     let newPos = Leaflet.get_lat_lng (Leaflet.target e) () in
//     on_update pos newPos init_name init_color init_icon) in
//
//   let () = Leaflet.on marker 'dblclick' (fun _ ->
//     Modal.show (form (on_update pos pos) colors init_name init_color init_icon)) in
//
//   marker