import React, { useState, useEffect, useContext } from "react";
import { Input, Label, ErrorMsg } from "./index.styled";

/**
 * @param {{
 *  type: string,
 *  disabled: boolean,
 *  onClick: function,
 *  style: CSSProperties,
 *  required: boolean,
 *  value: string | number,
 *  onChange: function,
 * }} props - properties of Input Component
 *
 */

const InputComponent = (props) => {
  const [value, setValue] = useState("");
  const [formErrors, setFormErrors] = useState(false);

  const validate = (e) => {
    if (!e.target.value) {
      setFormErrors(true);
      setTimeout(() => {
        setFormErrors(false);
      }, 2000);
    } else {
      //console.log("false");
    }
  };

  //validation
  const handleValidation = () => {
    // setFormErrors(validate(formData));
  };

  return (
      <div style={props.style}>
        <Label htmlFor={props.in} style={props.customLabelStyle}>
          {props.label}
        </Label>
        <Input
          type={props.inputType}
          name={props.inputName}
          value={props.value}
          id={props.inputId}
          placeholder={props.placeholder}
          style={props.customInputStyle}
          disabled={props.disabled}
          hasError={props.hasError}
          onBlur={validate}
          required={props.required}
          onChange={props.onChange}
          ariaDescribedby={props.ariaDescribedby}
          min={props.min}
          max={props.max}
          pattern={props.pattern}
        />
        {props.hasError && (
          <ErrorMsg role="alert" id={props.errorMsgId}>
            {props.errorMsg}
          </ErrorMsg>
        )}
      </div>
  );
};

export default InputComponent;
