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

export function input(id: string, label: string, attrs: object): Element {
  return h('div',
    { className: 'g-Form__Field' },
    h('div',
      { className: 'g-Form__Label' },
      h('label', { for: id }, label)
    ),
    h('input', { id: id, ...attrs })
  )
}

export function colorInput(
  defaultColors: string[],
  id: string,
  label: string,
  initValue: string,
  onInput: (value: string) => void
): Element {
  const input = h('input',
    { id,
      value: initValue,
      type: 'color',
      oninput: (e: Event) => {
        if (e.target !== null) {
          onInput((e.target as HTMLInputElement).value)
        }
      }
    }
  ) as HTMLInputElement
  return h('div',
    { className: 'g-Form__Field' },
    h('div',
      { className: 'g-Form__Label' },
      h('label', { for: id }, label)
    ),
    Layout.line(
      {},
      ...(defaultColors.map(color =>
        Button.raw({ className: 'g-Form__DefaultColor',
          style: `background-color: ${color}`,
          type: 'button',
          onclick: () => {
            input.value = color
            onInput(color)
          }
        })
      ).concat(input))
    )
  )
}

export function textarea(
  id: string,
  label: string,
  initValue: string,
  onInput: (value: string) => void
): Element {
  return h('div',
    { className: 'g-Form__Field' },
    h('div',
      { className: 'g-Form__Label' },
      h('label', { for: id }, label)
    ),
    h('textarea',
      { id,
        className: 'g-Form__Textarea',
        oninput: (e: Event) => {
          if (e.target !== null) {
            onInput((e.target as HTMLTextAreaElement).value)
          }
        }
      },
      initValue
    )
  )
}