let form on_validate 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" init_name (fun newName -> name := newName)
                ;  Form.color_input "g-MarkerForm__Color" "Color" init_color (fun newColor -> color := newColor)
                ;  Autocomplete.create
                    "g-MarkerForm__Icon"
                    "Icon"
                    FontAwesome.icons
                    (fun newIcon -> let () = Js.log newIcon in icon := newIcon)
                    [| HA.value init_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 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) 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) init_name init_color init_icon)) in

  marker