import { h } from 'lib/h'
import * as Layout from 'lib/layout'
import * as Button from 'lib/button'

interface InputParams {
  label: string,
  attrs: object,
}

export function input({ label, attrs }: InputParams): Element {
  return h('label',
    { className: 'g-Form__Field' },
    label,
    h('input', attrs),
  )
}

interface ColorInputParams {
  colors: string[],
  label: string,
  initValue: string,
  onInput: (value: string) => void,
}

export function colorInput({ colors, label, initValue, onInput }: ColorInputParams): Element {
  const input = h('input',
    { value: initValue,
      type: 'color',
      oninput: (e: Event) => {
        if (e.target !== null) {
          onInput((e.target as HTMLInputElement).value)
        }
      }
    }
  ) as HTMLInputElement
  return h('label',
    { className: 'g-Form__Field' },
    label,
    Layout.line(
      {},
      input,
      ...colors.map(color =>
        Button.raw({ className: 'g-Form__Color',
          style: `background-color: ${color}`,
          type: 'button',
          onclick: () => {
            input.value = color
            onInput(color)
          }
        })
      )
    )
  )
}