import { TextField, InputAdornment } from "@mui/material";
import { Doc } from '../../../../fields/Doc';
import React = require('react');
import TaskAltIcon from "@mui/icons-material/TaskAlt";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
export interface IInputProps {
  label?: JSX.Element;
  lowerBound: number;
  dataDoc: doc;
  prop: string;
  step: number;
  unit: string;
  upperBound: number;
  value: number | string | Array<number | string>;
  correctValue?: number;
  showIcon?: boolean;
  effect?: (val: number) => any;
  radianEquivalent?: boolean;
  small?: boolean;
  mode?: string;
  update?: boolean;
  labelWidth?: string;
}

interface IState {
  tempValue: number,
  tempRadianValue: number,
}

export default class InputField extends React.Component<IInputProps, , IState> {
  constructor(props: any) {
    super(props)
    this.state = {
      tempValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : this.props.value,
      tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180
    }
  }

  epsilon: number = 0;
  width: string = "6em";
  margin: string = "6em";
  componentDidMount() {
    this.epsilon = 0.01;
    this.width = this.props.small ? "6em" : "7em";
    this.margin = this.props.small ? "0px" : "10px";
  }


  componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
  }



  useEffect(() => {
    if (mode == "Freeform") {
      if (Math.abs(tempValue - Number(value)) > 1) {
        setTempValue(Number(value));
      }
    }
  }, [value]);

  externalUpdate = () => {
    setTempValue(Number(value));
    setTempRadianValue((Number(value) * Math.PI) / 180);
  };

  useEffect(() => {
    this.externalUpdate();
  }, [update]);

  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let value = event.target.value == "" ? 0 : Number(event.target.value);
    if (value > this.props.upperBound) {
      value = this.props.upperBound;
    } else if (value < this.props.lowerBound) {
      value = this.props.lowerBound;
    }
    this.props.dataDoc[this.props.prop] = value
    setTempValue(event.target.value == "" ? event.target.value : value);
    setTempRadianValue((value * Math.PI) / 180);
    if (effect) {
      effect(value);
    }
  };

  onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
    let value = event.target.value === "" ? 0 : Number(event.target.value);
    if (value > 2 * Math.PI) {
      value = 2 * Math.PI;
    } else if (value < 0) {
      value = 0;
    }
    this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
    setTempValue((value * 180) / Math.PI);
    setTempRadianValue(value);
    if (effect) {
      effect((value * 180) / Math.PI);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        lineHeight: "1.5",
        textAlign: "right",
        alignItems: "center",
      }}
    >
      {label && (
        <div
          style={{
            marginTop: "0.3em",
            marginBottom: "-0.5em",
            width: labelWidth ?? "2em",
          }}
        >
          {label}
        </div>
      )}
      <TextField
        type="number"
        variant="standard"
        value={tempValue}
        onChange={onChange}
        sx={{
          height: "1em",
          width: { width },
          marginLeft: { margin },
          zIndex: "modal",
        }}
        inputProps={{
          step: step,
          min: lowerBound,
          max: upperBound,
          type: "number",
        }}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              {Math.abs(Number(value) - (correctValue ?? 0)) < epsilon &&
                showIcon && <TaskAltIcon color={"success"} />}
              {Math.abs(Number(value) - (correctValue ?? 0)) >= epsilon &&
                showIcon && <ErrorOutlineIcon color={"error"} />}
            </InputAdornment>
          ),
          endAdornment: <InputAdornment position="end">{unit}</InputAdornment>,
        }}
      />
      {radianEquivalent && (
        <div
          style={{ marginTop: "0.3em", marginBottom: "-0.5em", width: "1em" }}
        >
          <p>≈</p>
        </div>
      )}
      {radianEquivalent && (
        <TextField
          type="number"
          variant="standard"
          value={tempRadianValue}
          onChange={onChangeRadianValue}
          sx={{
            height: "1em",
            width: { width },
            marginLeft: { margin },
            zIndex: "modal",
          }}
          inputProps={{
            step: Math.PI / 8,
            min: 0,
            max: 2 * Math.PI,
            type: "number",
          }}
          InputProps={{
            endAdornment: <InputAdornment position="end">rad</InputAdornment>,
          }}
        />
      )}
    </div>
  );
};