import React, { useEffect, useState, useRef } from "react";
import style from "./inputText.module.css";
import {
  ErrorOutlineOutlined,
  WarningAmberOutlined,
} from "@mui/icons-material";

const InputText = (props) => {
  const [value, setValue] = useState(props.value ? props.value : "");
  const [error, setError] = useState(null);
  const ref = useRef();

  const validation = (value) => {
    if (props.type === "number") {
      if (isNaN(parseInt(value))) {
        setValue("");
        props.getValue("");
        ref.current.value = "";
        return false;
      }
      if (value === "") {
        props.getValue && props.getValue(value);
        setValue(value);
        return;
      }
      if (typeof props.min === "number" && props.min > value) {
        ref.current.value = props.min;
      } else if (props.max && props.max < value) {
        ref.current.value = props.max;
      } else {
        props.getValue && props.getValue(value);
        setValue(value);
      }
    } else {
      console.log("value: ", value);
      if (props.getValue) props.getValue(value);
      setValue(value);
    }
  };
  useEffect(() => {
    console.log("props.value: ", props.value);
    setValue(props.value);
  }, [props.value]);
  return (
    <>
      <div
        className={`${style.inputBox} ${
          props.customClass && props.customClass
        }  ${props.error && style.error} ${props.label && style.label} ${
          props.customCss && props.customCss
        }`}
      >
        {props.inputType === "textarea" ? (
          <textarea
            placeholder={props.placeholder}
            name={props.name}
            required={props.required}
            ref={ref}
            cols={props.cols}
            rows={props.rows}
            defaultValue={value}
            id={props.id}
            onInput={(e) => {
              validation(e.target.value);
            }}
            disabled={props.disabled}
          ></textarea>
        ) : (
          <input
            type={`${props.type ? props.type : "text"}`}
            placeholder={props.placeholder && props.placeholder}
            value={value}
            name={props.name}
            required={props.required}
            min={props.min}
            pattern={props.pattern || null}
            max={props.max}
            maxLength={props.maxLength}
            minLength={props.minLength}
            ref={ref}
            id={props.id}
            onInput={(e) => {
              validation(e.target.value);
            }}
            disabled={props.disabled}
          />
        )}

        {props.label && (
          <label htmlFor={props.id}>
            {props.icon && props.icon}
            {props.label} {props.required === true && <sup>*</sup>}
          </label>
        )}
        {props.error ? (
          <p className={style.errorText}>
            {/* {<WarningAmberOutlined />} */}
            {props.error}
          </p>
        ) : (
          error && (
            <p className={style.errorText}>
              {/* {<WarningAmberOutlined />} */}
              {error}
            </p>
          )
        )}
        {props.message && (
          <p className={style.message}>
            <ErrorOutlineOutlined />
            {props.message}
          </p>
        )}
      </div>
    </>
  );
};

export default InputText;
