import { h } from 'lib/h'
import * as Button from 'lib/button'
import * as ContextMenu from 'lib/contextMenu'
import * as Layout from 'lib/layout'
import * as Modal from 'lib/modal'
import * as Marker from 'marker'
const L = window.L

let map

export function view() {
  // let state = ref (state_from_hash ()) in
  // let map = ref None in
  // let markers = Leaflet.feature_group [| |] in
  window.setTimeout(() => map = getMap(), 0)
  return element()
}

function element(): Element {
  return h('div',
    { className: 'g-Layout__Page' },
    h('div',
      { className: 'g-Layout__Header' },
      h('a',
        { className: 'g-Layout__Home',
          href: '#'
        },
        'Map'
      ),
      Layout.line(
          { className: 'g-Layout__HeaderImportExport' },
          h('input',
            { id: 'g-Header__ImportInput',
              type: 'file',
              onchange: () => {
                // match !map with
                // | Some map ->
                //     let reader = File.reader () in
                //     let () = Element.add_event_listener reader 'load' (fun _ ->
                //       let str = File.result reader in
                //       let new_state = State.from_dicts (CSV.to_dicts (CSV.parse str)) in
                //       let () = History.push_state '' '' ('#' ^ State.to_url_string new_state) () in
                //       reload_from_hash state map markers true)
                //     in
                //     File.read_as_text reader (
                //         Js.Array.unsafe_get (Element.files (Event.target e)) 0)
                // | _ ->
                //     ())
              }
            }
          ),
          h('label',
            { for: 'g-Header__ImportInput',
              className: 'g-Button__Text'
            },
            'Import'
          ),
          Button.text({}, 'Export')
            // { onclick: () => File.download 'map.csv' (State.to_csv_string !state)) |]
      )
    )
    , h('div',
      { className: 'g-Map' },
      h('div', { id: 'g-Map__Content' })
    )
  )
}

function getMap(): object {

  const map = L.map('g-Map__Content', {
    center: [51.505, -0.09],
    zoom: 13,
    attributionControl: false
  })

  // map.addLayer(markers)
  map.addLayer(L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'))

  // (* Init markers from url *)
  // let () = reload_from_hash state map markers true in

  // (* Reload the map if the URL changes *)
  // let () = Element.add_event_listener Window.window 'popstate' (fun _ ->
  //   reload_from_hash state map markers true)
  // in

  // Context menu
  map.addEventListener('contextmenu', e => {
    ContextMenu.show(
      e.originalEvent,
      [ { label: 'Add a marker',
          action: () => {
           const pos = e.latlng
           const marker = { pos, name: '', color: '#3F92CF', icon: '' }
           const colors: string[] = []

          const add_marker = (name: string, color: string, icon: string) => {
            console.log('adding marker…')
            // let new_marker = { State.pos = pos; name = name; color = color; icon = icon } in
            // let new_state = State.update !state pos new_marker in
            // let () = History.push_state '' '' ('#' ^ State.to_url_string new_state) () in
            // reload_from_hash state map markers false
          }

           //  let marker =
           //    match State.last_added !state with
           //    | Some m -> { m with pos = pos; name = '' }
           //    | _ -> { pos = pos; name = ''; color = '#3f92cf'; icon = '' }
           //  in
           // let colors = State.colors !state in
           Modal.show(Marker.form(
             add_marker,
             colors,
             marker.name,
             marker.color,
             marker.icon
           ))
         }
       }
     ]
    )
  })

  return map
}