import React from "react";
import PropTypes from "prop-types";
import cn from "classnames";
import Tooltip from "../tooltip/tooltip";
import TooltipInner from "../tooltip/tooltip-inner";
import { IInputProps } from "./form.d";
import Form from "./form-tags";

const Input = (props: IInputProps) => {
  const {
    autoComplete,
    autoFocus,
    className,
    disabled,
    error,
    help,
    inputAppend,
    inputPrepend,
    label,
    labelClassName,
    name,
    onBlur,
    onChange,
    placeholder,
    readOnly,
    required,
    type,
    value,
    toggleVisibility,
    inputGroupClassName,
    formGroupClassName,
    onKeyUp,
    disabledReason,
    escapeHelpContent
  } = props;
  const testId = props["data-testid"] || "honeyui-input";

  return (
    <Form.Group className={formGroupClassName}>
      <Form.LabelTag className={labelClassName} name={name} data-testid={`${testId}-label`}>
        {label}
      </Form.LabelTag>
      <div className={cn("position-relative", { "is-invalid": !!error })}>
        {disabled && disabledReason && (
          <Tooltip
            reference={
              <span className="position-absolute w-100 h-100 d-flex" style={{ zIndex: 1 }} />
            }
            placement="top"
          >
            <TooltipInner className="mw-100">
              <span>{disabledReason} </span>
            </TooltipInner>
          </Tooltip>
        )}
        <Form.InputTag
          autoComplete={autoComplete}
          autoFocus={autoFocus}
          className={className}
          data-testid={testId}
          disabled={disabled}
          error={error}
          inputAppend={inputAppend}
          inputPrepend={inputPrepend}
          name={name}
          onBlur={onBlur}
          onChange={onChange}
          placeholder={placeholder}
          readOnly={readOnly}
          required={required}
          type={type}
          value={value}
          toggleVisibility={toggleVisibility}
          inputGroupClassName={inputGroupClassName}
          onKeyUp={onKeyUp}
        />
      </div>

      <Form.HelpTag data-testid={`${testId}-help`} name={name} escapeContent={escapeHelpContent}>
        {help}
      </Form.HelpTag>
      <Form.ErrorTag data-testid={`${testId}-error`} name={name}>
        {error}
      </Form.ErrorTag>
    </Form.Group>
  );
};

Input.displayName = "Input";

Input.defaultProps = {
  autoComplete: false,
  autoFocus: false,
  disabled: false,
  readOnly: false,
  required: false,
  type: "text"
};

Input.propTypes = {
  autoComplete: PropTypes.bool,
  autoFocus: PropTypes.bool,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  error: PropTypes.string,
  help: PropTypes.string,
  label: PropTypes.string,
  labelClassName: PropTypes.string,
  name: PropTypes.string.isRequired,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  readOnly: PropTypes.bool,
  required: PropTypes.bool,
  type: PropTypes.string,
  value: PropTypes.string.isRequired,
  toggleVisibility: PropTypes.bool,
  inputGroupClassName: PropTypes.string,
  formGroupClassName: PropTypes.string,
  escapeHelpContent: PropTypes.bool
};

export default Input;