import { h, Component } from 'preact';

import { omit } from 'lowline';

import FormElement from './FormElement.jsx';

export default class Input extends FormElement {
  render({ type = 'text', disabled, placeholder }, state = {}) {
    const classes = Object.assign({
      'field-container': true,
      empty: !state.value,
      filled: state.value,
      focus: state.focus,
      invalid: state.error,
      touched: state.touched,
      valid: state.value && !state.error,
    });

    return (
      <div class={classes}>
        <label className="placeholder">{placeholder}</label>
        <input
          disabled={disabled}
          onBlur={this.onBlur}
          onChange={this.onChange}
          onFocus={this.onFocus}
          onInput={this.onChange}
          placeholder={placeholder}
          ref={(input) => { this.input = input; }}
          type={type}
          value={state.value}
        />
        <label class="icon" />
        {state.error && <label class="error">{state.error}</label>}
      </div>
    );
  }
}