import React, { Component } from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import FormHelperText from "@material-ui/core/FormHelperText";
import MaskedInput from "react-text-mask";
import FCConnector from "../../utilities/FCConnector";
import { injectIntl, intlShape, FormattedMessage } from "react-intl";

function TextMaskCustom(props) {
  const { inputRef, ...other } = props;

  return (
    <MaskedInput
      {...other}
      mask={[/\d/, ".", /\d/, /\d/]}
      keepCharPositions
      guide={false}
    />
  );
}
const FloatView = class extends Component {
  constructor(props) {
    super(props);
    this.floatPad = props.floatPad || 3;
    this.state = {
      currentRaw: props.item.current,
      floatPad: this.floatPad,
      current: props.item.current
        .replace(".000", "")
        .padStart(this.floatPad, "0")
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.item.current !== this.state.currentRaw) {
      this.setState({
        currentRaw: nextProps.item.current,
        current: nextProps.item.current.toString().padStart(this.floatPad, "0")
      });
    }
  }

  updateValue() {
    let current = parseInt(this.state.current.padEnd(this.floatPad, "0"), 10);
    let isDirty = parseInt(this.props.item.current, 10) !== current;
    if (isDirty) {
      this.props.item.current = current;
      this.setState({
        isDirty: true,
        current: current.toString()
      });
      FCConnector.setValue(this.props.item.id, current).then(() => {
        this.props.notifyDirty(true, this.state, current);
        this.setState({ isDirty: false });
      });
    }
  }

  render() {
    return (
      <FormControl
        style={{ width: 90 }}
        classes={{ root: this.props.item.id }}
        key={this.props.item.id}
      >
        <InputLabel style={{ whiteSpace: "nowrap" }} shrink={true}>
          {this.props.name_type === "raw" && <p>{this.props.label}</p>}
          {this.props.name_type !== "raw" && (
            <FormattedMessage id={this.props.item.id} />
          )}
        </InputLabel>
        <Input
          id={this.props.item.id}
          disabled={this.state.isDirty}
          onChange={event => {
            let val = event.target.value || "";
            this.setState({ current: val.replace(".", "") });
          }}
          onBlur={() => this.updateValue()}
          onKeyPress={event => {
            if (event.key === "Enter") {
              event.target.blur();
            }
          }}
          value={this.state.current}
          inputComponent={TextMaskCustom}
        />
        {this.props.intl.messages[`${this.props.id}.helper`] && (
          <FormHelperText>
            <FormattedMessage id={`${this.props.id}.helper`} />
          </FormHelperText>
        )}
      </FormControl>
    );
  }
};

FloatView.propTypes = {
  intl: intlShape.isRequired
};

export default injectIntl(FloatView);