import React, { useState } from 'react';
// import './password.css'
import IMAGE from '../../../assets/images/icons/index'

type Props = {
    label?: string,
    id:string,
    name: string,
    value:string;
    placeholder?: string,
    disable?: boolean,
    readonly?: boolean,
    helperText?: string,
    error?: boolean,
    errorMessage?: string,
    icon?:boolean,
    size?: 'default' | 'small' | 'medium' | 'large',
    borderRadious?: 'small' | 'medium' | 'large',
    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}


const InputField = (props: Props) => {
    const [passwordShown, setPasswordShown] = useState<boolean>(false);
    const {label, id, name,value, placeholder, disable, readonly,helperText,error,errorMessage,borderRadious, size,icon=true, handleChange} = props;
    const SVG= IMAGE.EyeviewSolid
    const SVG1= IMAGE.EyeslashSolid
    const style = {
      paddingRight: icon ? '40px' : '10px'
    }

    const togglePassword = () => {
        setPasswordShown(!passwordShown);
    };

  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}` : ''}`}>
            <input
                style={style}
                className={`form-control control-${size}`}
                type={passwordShown ? 'text' : 'password'}
                id={id}
                name={name}
                value={value}
                disabled={disable}
                readOnly={readonly}
                placeholder={placeholder}
                onChange={handleChange}
            ></input>
            {icon ? <span onClick={togglePassword} className='right'>
                {passwordShown ? <SVG  style={{ width: '25px' ,height:'25px',fill: 'gray' }} /> : <SVG1  style={{ width: '25px' ,height:'25px',fill: 'gray' }} />}
            </span> : ''
            }
          </div>
          {(error && errorMessage) && <p className='error-text'>{errorMessage}</p>}
          {(!error && helperText) && <p className='helper-text'>{helperText}</p>}
    </div>
  )
};

export default InputField;