import React, {FocusEventHandler, useState} from 'react';
import {useTranslation} from "react-i18next";
import visible from '../../../assets/images/eye-show.svg';
import hidden from '../../../assets/images/eye-hide.svg';
import './textfield-password.scss'
import FormError from '../FormError/FormError';


interface TextFieldPasswordProps {
    ref?: any
    value?: string
    onChange: (s: string) => void
    required?: boolean
    theme?: 'default' | 'afm-form' | 'user-form-field'
    id?: string
    readOnly?: boolean
    inputMode?: 'text' | 'numeric'
    placeholder?: string
    hasError?: string
    maxLength?: number
    isForGate?: boolean
    autoComplete?: string
    onKeyDown?: any

}
const CustomTextFieldPassword = (
    {
        value,
        onChange,
        required = false,
        theme = 'default',
        id = 'fieldId',
        readOnly = false,
        inputMode = 'text',
        placeholder = 'placeholders.please_complete',
        hasError = '',
        maxLength,
        isForGate,
        autoComplete='on',
        onKeyDown,

    }: TextFieldPasswordProps) => {
        const {t, i18n} = useTranslation();
        const translatedPlaceholder = t(placeholder);
        const [inputType, setInputType] = useState<string>('password');
    //@ts-ignore
    return (
        <>
            <div className='row align-items-center input-wrapper'>
                <div className='col'>
                    <input
                        autoComplete={autoComplete}
                        readOnly={readOnly}
                        type={inputType}
                        id={id}
                        required={required}
                        inputMode={inputMode}
                        placeholder={translatedPlaceholder}
                        maxLength={maxLength}
                        className={isForGate ? `text-field  ${theme}` : `text-field ${theme} ${readOnly && 'disable'} ${hasError && 'hasError'}`}
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        onKeyDown={(e)=>{
                            onKeyDown && onKeyDown(e)
                        }}
                    />
                </div>
                <div className='col-auto type-toggler'>
                    {
                    inputType === 'password' 
                    ? 
                        <img src={hidden} onClick={() => setInputType('text')} width='24px'/>
                        :
                        <img src={visible} onClick={() => setInputType('password')} width='24px'/>
                    }
                </div>
            </div>

            {hasError &&  <FormError>{hasError}</FormError>}
        </>
        );
}

export default CustomTextFieldPassword;