/**
 * Component to be used for Input
 * @author Hasna
 */

import React, { useState } from "react";

import { Input } from "antd";

import PropTypes from "prop-types";

// import 'antd/dist/antd.css';

export default function InputComponent({
  className,
  disabled,
  onChange,
  type,
  maxLength,
  placeholder,
  readOnly,
  value,
  mode = "capitalize",
}) {
  /**
   *  Function to transform entered value according to mode
   *
   * @param {*} mode
   * @param {*} e
   */
  const onTransform = (mode, e) => {
    var transformedValue;

    // Transforms value according to mode selected
    if (mode === "normal") {
      transformedValue = e.target.value;
    } else if (mode === "lowercase") {
      transformedValue = e.target.value.toLowerCase();
    } else if (mode === "uppercase") {
      transformedValue = e.target.value.toUpperCase();
    } else {
      transformedValue = capitalizeFirstLetter(e.target.value);
    }

    onChange(transformedValue);
  };

  /**
   *  To capitalize first character only
   * @param {*} string
   * @returns
   */
  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

  return (
    <Input
      type="text"
      autocomplete="off"
      autoComplete="off"
      className={className}
      placeholder={placeholder}
      disabled={disabled}
      onChange={(e) => onTransform(mode, e)}
      maxLength={maxLength}
      readOnly={readOnly}
      value={value}
    />
  );
}

InputComponent.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  type: PropTypes.string,
  maxLength: PropTypes.number,
  placeholder: PropTypes.string,
  readOnly: PropTypes.bool,
};
