import React from "react";
import style from "./TextBox.module.css";
import textBoxConstants from  "./TextBox.constantProps";
import getCompliedClassName from "../../utils/getCompliedClassName";
import getCompliedCustomId from "../../utils/getCompliedCustomId";
import textBoxPropTypes, { defaultProps, propsDescription } from "./TextBox.propTypes";
import PropTypes from "prop-types";

export default function TextBox(props) {
  let {
    placeholder,
    name,
    value,
    id,

    maxlength,
    minlength,
    min,
    max,
    step,
    pattern,
    required,
    autocomplete,

    variant,
    border,
    type,
    size,
    shape,

    active,
    hovered,
    disabled,
    readonly,

    startIcon,
    endIcon,

    onClick,
    onFocus,
    onBlur,
    onChange,
    onKeyPress,
    onKeyUp,
    onKeyDown,
    onMouseUp,
    onMouseDown,
    inputRef,

    ariaLabel,
    role,
    tabIndex,
    autofocus,
    focusClass,
    ariaDisabled,

    customClassName,
    customId,

    tagAttributeProps

  } = props;

  let hasIcon = (startIcon || endIcon);
  let className = getCompliedClassName(customClassName,
    {
      [style.base]: true,
      [style[size]]: !!size,
      [style[shape]]: !!shape,
      [style[variant]]: !!variant,
      [style[border]]: !!border,
      //[style.content]: !!(startIcon || endIcon || children),

      [style.active]: !!active,
      [style.hovered]: !!hovered,
      [style.disabled]: !!disabled,
      [style.readonly]: !!readonly,
    },
    {
      [customClassName.base]: !!customClassName.base,
      [customClassName.size]: !!customClassName.size,
      [customClassName.shape]: !!customClassName.shape,
      [customClassName.variant]: !!customClassName.variant,
      [customClassName.border]: !!customClassName.border,

      [customClassName.active]: !!customClassName.active,
      [customClassName.hovered]: !!customClassName.hovered,
      [customClassName.disabled]: !!customClassName.disabled,
      [customClassName.readonly]: !!customClassName.readonly,
    }
  );

  let textBoxFunctionalProperties = {
    maxlength : maxlength,
    minlength : minlength,
    min : min,
    max : max,
    step : step,
    pattern : pattern,
    required : required,
    autofocus : autofocus,
    autocomplete : autocomplete,
    ...tagAttributeProps
  };
  
  return (
    <>
    <RenderAsIcon icon={startIcon} className={style.start_icon} />
      <input
        type={type}
        name={name}
        value={value}
        id={id}
        placeholder={placeholder}

        // maxlength={maxlength}
        // minlength={minlength}
        // min={min}
        // max={max}
        // step={step}
        // pattern={pattern}
        // required={required}
        // autofocus={autofocus}
        // autocomplete={autocomplete}
        {...textBoxFunctionalProperties}

        className={className}

        disabled={disabled}
        readonly={readonly}

        data-id={getCompliedCustomId(props, customId.textbox)}

        aria-label={ariaLabel}
        role={role}
        tabIndex={tabIndex}
        data-aria-focusstyle={focusClass}
        data-aria-autofocus={autofocus}
        aria-disabled={ariaDisabled}

      />
    <RenderAsIcon icon={endIcon} className={style.end_icon} />
    </>
  );
}

TextBox.propTypes=textBoxPropTypes
TextBox.defaultProps=defaultProps
TextBox.propsDescription=propsDescription
TextBox.constantProps=textBoxConstants

const RenderAsIcon=(props)=>{
  return props.icon ? (
    <span className={props.className}>
      {props.icon}
    </span>
  ) : null
};
  
RenderAsIcon.propTypes={
  icon : PropTypes.any,
  className : PropTypes.string
}


/*Disableed readoly
event props as common
border props
stretch size
*/
