import React, { FC, useState } from "react";
import { Input } from "antd";
import styles from "./FormInput.module.scss";
import cx from "classnames";

import classNames from "classnames";
import TextArea from "antd/lib/input/TextArea";
const FormInput: FC<any> = (props) => {
  const [focus, setFocus] = useState(false);
  let { label, value, placeholder, type, required, inputType, readOnly } = props;

  if (!placeholder) placeholder = label;

  const isOccupied = focus || (value && value.length !== 0);

  const labelClass = isOccupied ? "label as-label" : "label as-placeholder";

  const requiredMark = required ? (
    <span className={cx(styles.textdanger)}>*</span>
  ) : null;

  return (
    <div
      className={styles.floatlabel}
      onBlur={() => setFocus(false)}
      onFocus={() => setFocus(true)}
    >
      {inputType == "Text" ? (
        <>
          <Input
            onChange={props.onChange}
            type={type}
            defaultValue={value}
            size={"large"}
            readOnly={readOnly}
          />
        </>
      ) : inputType == "TextArea" ? (
        <>
          <TextArea
            onChange={props.onChange}
            defaultValue={value}
            size={"large"}
            style={{ height: 80, resize: "none" }}
            maxLength={160}
            showCount
          />
        </>
      ) : inputType == "Number" ? (
        <><Input
          onChange={props.onChange}
          type={type}
          defaultValue={value}
          size={"large"}
          className={"numberInput"}
          readOnly={readOnly}

        /></>
      ) : inputType == "Password" ? (
        <><Input.Password
          onChange={props.onChange}
          type={type}
          defaultValue={value}
          size={"large"}
        /></>
      ) : <></>}

      <label
        className={cx(
          styles.label,
          isOccupied ? styles.aslabel : styles.asplaceholder
        )}
      >
        {isOccupied ? label : placeholder} {requiredMark}
      </label>
    </div>
  );
};

export default FormInput;