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

import * as React from 'react';
import classNames from 'classnames';
import FormCore from '../form/core';
import { regexp } from '../util/validate';

const prefix = 'tsp-component-Textarea';
class Textarea extends React.Component<TspComponentTextareaProps, TspComponentInputState> {
  constructor(props: TspComponentTextareaProps, state: TspComponentInputState) {
    super(props, state);
    this.onChange = this.onChange.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.onKeyUp = this.onKeyUp.bind(this);
    // this.onFocus = this.onFocus.bind(this);
  }
  public static defaultProps: TspComponentTextareaProps = {
    id: '',
    defaultValue: '',
    auto: false,
    rows: 5,
    emoji: true
  };

  public state: TspComponentInputState = {
    value: this.props.defaultValue
  };

  /**
   * FormCore 实例
   */
  private formCore: FormCore;
  /**
   * refs pre HTMLElement
   */
  private preElem: HTMLElement;

  public componentDidMount(): void {
    this.preElem = this.refs.pre as HTMLElement;
    this.formCore = new FormCore({
      elem: this.refs.elem as HTMLElement,
      required: this.props.required,
      defaultValue: this.props.defaultValue
    });
    this.preElem.textContent = this.props.defaultValue.toString();
  }

  public componentDidUpdate(prevProps: TspComponentTextareaProps): void {
    if (this.props.defaultValue !== prevProps.defaultValue) {
      this.preElem.textContent = this.props.defaultValue.toString();
    }
  }

  public onKeyUp(e: any): void {
    if (this.props.auto) {
      if (e.keyCode === 13) {
        this.preElem.textContent += ' ';
      }
    }
  }

  public onChange(e: any): void {
    let value = e.target.value;

    if (this.props.emoji) {
      value = value.replace(regexp.emoji, '');
    }
    if (this.props.onChange) {
      this.props.onChange(value, e);
    }
    this.formCore.elem.dataset.value = value;
    if (this.props.auto) {
      this.preElem.textContent = value;
    }
    this.setState({ value });
  }

  public onBlur(e: any): void {
    if (this.props.onBlur) {
      this.props.onBlur(this.state.value, e);
    }
  }

  public render(): JSX.Element {
    return (
      <div className={`${prefix}-wrap`}>
        <pre
          className={classNames({
            [`${prefix}-hidecode`]: this.props.auto,
            [`${prefix}-hidecode-hidden`]: !this.props.auto,
          })}
          ref="pre"
        />
        <textarea
          id={this.props.id}
          className={classNames({
            [prefix]: true,
            [this.props.className]: this.props.className,
            [`${prefix}-disabled`]: this.props.disabled,
            [`${prefix}-auto`]: this.props.auto
          })}
          ref="elem"
          placeholder={this.props.placeholder}
          value={this.state.value}
          maxLength={this.props.maxLength}
          disabled={this.props.disabled}
          readOnly={this.props.readOnly}
          onChange={this.onChange}
          onBlur={this.onBlur}
          onKeyUp={this.onKeyUp}
          rows={this.props.rows}
        />
      </div>
    );
  }
}

export default Textarea;