import React, { useEffect, useState } from "react";
import "./index.scss";

interface Props {
  fieldName: string;
  placeholder: string;
  value?: string;
  limit: number;
  error: string;
  onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const CharLimitedFieldset = React.forwardRef<HTMLInputElement, Props>(
  function useFieldSet(props, ref) {
    const fieldType = ["password", "confirm_password"].includes(props.fieldName)
      ? "password"
      : "text";

    const [currentCount, setCurrentCount] = useState(0);

    useEffect(() => {
      setCurrentCount(
        props.value ? props.limit - props.value.length : props.limit
      );
    }, [props.limit, props.value]);

    function onChange(event: React.ChangeEvent<HTMLInputElement>) {
      setCurrentCount(props.limit - event.currentTarget.value.length);
      if (props.onChange) props.onChange(event);
    }

    return (
      <fieldset className="Fieldset">
        <div className="Limited">
          <input
            autoComplete="off"
            className="Input"
            type={fieldType}
            name={props.fieldName}
            placeholder={props.placeholder}
            defaultValue={props.value || ""}
            onBlur={props.onBlur}
            onChange={onChange}
            maxLength={props.limit}
            ref={ref}
            formNoValidate
          />
          <span className="Counter">{currentCount}</span>
        </div>
        {props.error.length > 0 && <p className="InputError">{props.error}</p>}
      </fieldset>
    );
  }
);

export default CharLimitedFieldset;