import _ from "lodash";
import React, { Component } from "react";
import { FontIcon } from "../index";
import style from "./style";

/**
 * Text fields allow users to input, edit, and select text
 * @param {object} props The props
 * @returns {function} The component
 */
class TextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value, showLabel: true };
    this.handleChange = this.handleChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.doFilter = this.doFilter.bind(this);
  }

  componentDidMount() {
    if (this.props.focusOnMount) this.input.focus();
    if (this.props.selectOnMount) this.input.select();

    this.setState({ value: this.props.value });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
  }

  doFilter(value) {
    const { format } = this.props;

    if (format === "currency")
      return parseFloat(value.replace(/[^0-9.]/g, ""))
        .toFixed(2)
        .replace(/\d(?=(\d{3})+\.)/g, "$&,");

    return value;
  }

  handleChange(event) {
    const value = event.target.value;
    const showLabel =
      this.props.size === "large" ? false : this.state.showLabel;
    this.setState({ value, showLabel });
    if (this.props.hasOwnProperty("onChange")) {
      this.props.onChange(event);
    }
  }

  handleBlur(event) {
    const value = this.doFilter(event.target.value);
    this.setState({ value }, () => {
      if (this.props.hasOwnProperty("onBlur")) {
        this.props.onBlur({ target: { value } });
      }
    });
  }

  handleClick(event) {
    if (this.props.focusOnClick) this.input.focus();
    if (this.props.hasOwnProperty("onClick")) {
      this.props.onClick(event);
    }
  }

  render() {
    const sizeInputStyle =
      this.props.size === "large" ? style.textInputLarge : style.textInput;
    const sizeLabelStyle =
      this.props.size === "large"
        ? style.textInputLabelLarge
        : style.textInputLabel;
    const iconLeftInput = this.props.iconLeft ? { paddingLeft: 50 } : null;
    const iconRightInput = this.props.iconRight ? {} : null;

    let display = "block";
    try {
      display = this.props.style.display;
    } catch (e) {
      display = "block";
    }

    return (
      <div
        style={{
          textAlign: "left",
          display
        }}
      >
        {this.props.label && this.state.showLabel ? (
          <span
            onClick={() => this.input.focus()}
            style={{ ...sizeLabelStyle, ...this.props.labelStyle }}
          >
            {this.props.label}
          </span>
        ) : null}

        {this.props.iconLeft && (
          <FontIcon style={_.get(this.props, "style.iconLeft", style.iconLeft)}>
            {this.props.iconLeft}
          </FontIcon>
        )}

        {this.props.iconRight && (
          <FontIcon
            style={_.get(this.props, "style.iconRight", style.iconRight)}
          >
            {this.props.iconRight}
          </FontIcon>
        )}

        {_.get(this.props, "multiline") ? (
          <textarea
            {..._.omit(this.props, [
              "focusOnMount",
              "labelStyle",
              "selectOnMount",
              "iconLeft",
              "iconRight",
              "multiline"
            ])}
            style={{
              ...sizeInputStyle,
              ...iconLeftInput,
              ...iconRightInput,
              ...this.props.style
            }}
            value={this.state.value}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            onClick={this.handleClick}
            ref={el => (this.input = el)}
          />
        ) : (
          <input
            {..._.omit(this.props, [
              "focusOnMount",
              "labelStyle",
              "selectOnMount",
              "iconLeft",
              "iconRight"
            ])}
            style={{
              ...sizeInputStyle,
              ...iconLeftInput,
              ...iconRightInput,
              ...this.props.style
            }}
            value={this.state.value}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            onClick={this.handleClick}
            ref={el => (this.input = el)}
          />
        )}
      </div>
    );
  }
}

TextInput.defaultProps = {
  size: "small",
  labelStyle: {},
  value: "",
  ref: false,
  focusOnMount: false,
  selectOnMount: false
  // format: false
};

export default TextInput;