let form on_validate colors init_name init_color init_icon =
  let name = ref init_name in
  let color = ref init_color in
  let icon = ref init_icon in
  let on_validate () =
        let () = on_validate !name !color !icon in
        Modal.hide ()
  in
  H.div
    [| |]
    [| Layout.section
        [| |]
        [| H.form
            [| HA.class_ "g-MarkerForm"
            ;  HE.on_submit (fun e ->
                let () = Event.prevent_default e in
                on_validate ())
            |]
            [| Layout.section
                [| |]
                [| Form.input
                    "g-MarkerForm__Name"
                    "Name"
                    [| HE.on_input (fun e -> name := (Element.value (Event.target e)))
                    ;  HA.value init_name
                    |]
                ;  Form.color_input colors "g-MarkerForm__Color" "Color" init_color (fun newColor -> color := newColor)
                ;  H.div
                    [| HA.class_ "g-Form__Field" |]
                    [| H.div
                        [| HA.class_ "g-Form__Label" |]
                        [| H.label
                          [| HA.for_ "g-MarkerForm__IconInput" |]
                          [| H.text "Icon" |]
                        |]
                    ; let dom_icon = H.div [| HA.class_ ("fa fa-" ^ !icon) |] [| |] in
                      Layout.line
                        [| HA.class_ "g-MarkerForm__AutocompleteAndIcon" |]
                        [| Autocomplete.create
                            [| HA.value init_icon
                            ;  HA.class_ "g-MarkerForm__Autocomplete"
                            |]
                            "g-MarkerForm__IconInput"
                            FontAwesome.icons
                            (fun icon ->
                              [| H.div
                                  [| HA.class_ ("g-MarkerForm__IconEntry fa fa-" ^ icon) |]
                                  [| |]
                              ;  H.text icon
                              |])
                            (fun newIcon ->
                              let () = icon := newIcon in
                              Element.set_class_name dom_icon ("fa fa-" ^ newIcon))
                        ;  H.div [| HA.class_ "g-MarkerForm__Icon" |] [| dom_icon |]
                        |]
                    |]
                |]
            ;  Layout.line
                [| |]
                [| Button.action
                    [| HE.on_click (fun _ -> on_validate ()) |]
                    [| H.text "Save" |]
                ;  Button.cancel
                    [| HE.on_click (fun _ -> Modal.hide ())
                    ;  HA.type_ "button"
                    |]
                    [| H.text "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