/// <reference path="./definition.d.ts" />

import * as React from 'react';
import Toast from '../toast';
import { unique } from '../util/tools';
import { deviceHeight } from '../util/device';
import { validatePattern, validateRequried } from '../util/validate';

class Form extends React.Component<TspComponentFormProps, any> {
  constructor(props: TspComponentFormProps, state: any) {
    super(props, state);
    this.onSubmit = this.onSubmit.bind(this);
    this.locationError = this.locationError.bind(this);
  }

  public static defaultProps: TspComponentFormProps = {
    prefix: '',
    top: 0,
    className: '',
    onSubmit: undefined,
    fields: undefined
  };

  // public componentDidMount(): void {
  // }

  public onSubmit(e: any): void {
    e.preventDefault();

    const fields = unique(this.props.fields);
    const prefix = this.props.prefix;
    const value = {};
    let flag = true;

    for (let i = 0; i < fields.length; i++) {
      const formControlElem = document.getElementById(prefix + fields[i]);
      if (!formControlElem) {
        continue;
      }

      if (!validateRequried(formControlElem, this.locationError)) {
        flag = false;
        break;
      }
      if (!validatePattern(formControlElem, this.locationError)) {
        flag = false;
        break;
      }

      value[fields[i]] = formControlElem.dataset.value;
    }

    if (flag) {
      this.props.onSubmit(value);
    }
  }

  public locationError(msg: string, formControlElem: HTMLElement): void {
    const y = formControlElem.offsetTop - deviceHeight / 2;
    const top =  y - this.props.top;

    if (this.props.container) {
      this.props.container.scrollLeft = top;
    } else {
      window.scrollTo(0, top);
    }

    Toast.warning(msg);
  }

  public render(): JSX.Element {
    return (
      <form
        className={this.props.className}
        onSubmit={this.onSubmit}
        ref="form"
      >
        {this.props.children}
      </form>
    );
  }
}

export default Form;