import React from 'react';
import './input.css'
import Iconsvg from '../../Ui/Icon/Icon'

type Props = {
    label?: string,
    id:string,
    name: string,
    value:string;
    type: 'text' | 'email' | 'search' | 'url' | 'number',
    placeholder?: string,
    disable?: boolean,
    readonly?: boolean,
    helperText?: string,
    error?: boolean,
    errorMessage?: string,
    icon?:boolean,
    iconPostions?: string,
    size?: 'default' | 'small' | 'medium' | 'large',
    borderRadious?: 'small' | 'medium' | 'large',
    variant?: 'default' |'primary' | 'secondary',
    iconName?:any,
    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}


const InputField = (props: Props) => {
    const {label, id, name, type, value, placeholder, disable, readonly,helperText,error,errorMessage,iconName, size,icon,iconPostions,variant,borderRadious,  handleChange} = props;
    const style = {
      paddingLeft: (icon && iconPostions == 'left') ? '40px' : '16px',
      paddingRight: (icon && iconPostions == 'right') ? '40px' : '16px'
    }

  return (
    <div className={`form-group ${error ? 'error' : ''} form-${size} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
          <label className='control-label'>{label}</label>
          <div className={`input-group ${size ? `group-${size}` : ''}`}>
            {(icon && iconPostions == 'left') ? <span className='left'><Iconsvg addClass={`${size ? `icon-${size}` : ''}`} name={iconName}/></span> : ''}
            <input
                style={style}
                className={`form-control control-${size}`}
                type={type}
                id={id}
                name={name}
                value={value}
                disabled={disable}
                readOnly={readonly}
                placeholder={placeholder}
                onChange={handleChange}
            ></input>
            {(icon && iconPostions == 'right') ? <span className={`right ${variant ? `color-${variant}` : ''}`}><Iconsvg addClass={`${size ? `icon-${size}` : ''}`} name={iconName}/></span> : ''}
          </div>
          {(error && errorMessage) && <p className='error-text'>{errorMessage}</p>}
          {(!error && helperText) && <p className='helper-text'>{helperText}</p>}

    </div>
  )
};

export default InputField;