import { h } from 'lib/h'
import * as AutoComplete from 'lib/autoComplete'
import * as Button from 'lib/button'
import * as Dom from 'lib/dom'
import * as Form from 'lib/form'
import * as Icons from 'lib/icons'
import * as Layout from 'lib/layout'
import * as State from 'state'

interface FormParams {
  onValidate: (color: string, icon: string, name: string, radius: number) => void,
  onCancel: () => void,
  color: string,
  icon: string,
  name: string,
  radius: number,
}

export function view({ onValidate, onCancel, color, icon, name, radius }: FormParams): Element {
  var radiusStr = radius.toString()
  const onSubmit = () => onValidate(color, icon, name, parseInt(radiusStr) || 0)
  const domIcon = h('div', 
    { className: 'g-MarkerForm__Icon' }, 
    Icons.get(icon, { fill: 'black', stroke: 'black' })
  )
  return h('div',
    {},
    Layout.section(
      {},
      h('form',
        { className: 'g-MarkerForm',
          onsubmit: (e: Event) => {
            e.preventDefault()
            onSubmit()
          }
        },
        Layout.section(
          {},
          Form.input({
            label: 'Name',
            attrs: { 
              oninput: (e: Event) => {
                if (e.target !== null) {
                  name = (e.target as HTMLInputElement).value
                }
              },
              onblur: (e: Event) => {
                if (e.target !== null) {
                  name = (e.target as HTMLInputElement).value.trim()
                }
              },
              value: name
            }
          }),
          Form.colorInput({
            colors: State.colors(),
            label: 'Color',
            initValue: color,
            onInput: 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',
                Icons.keys().sort(),
                iconKey => h('div',
                  { className: 'g-MarkerForm__IconEntry' },
                  h('div', { className: 'g-MarkerForm__IconElem' }, Icons.get(iconKey, { fill: 'black', stroke: 'black' }) ),
                  iconKey
                ),
                newIcon => {
                  icon = newIcon
                  Dom.replaceChildren(domIcon, Icons.get(icon, { fill: 'black', stroke: 'black' }))
                }),
                domIcon
              )
            ),
            Form.input({
              label: 'Radius (m)',
              attrs: { oninput: (e: Event) => {
                  if (e.target !== null) {
                    radiusStr = (e.target as HTMLInputElement).value
                  }
                },
                value: radiusStr,
                type: 'number',
              }
            })
          ),
        ),
        Layout.line(
          {},
          Button.action({ onclick: () => onSubmit() }, 'Save'),
          Button.cancel(
            { onclick: () => onCancel(),
              type: 'button'
            },
            'Cancel'
          )
        )
      )
    )
}

function restrictCharacters(str: string, chars: string): string {
  return str.split('').filter(c => chars.indexOf(c) != -1).join('')
}