import React, {FocusEventHandler, useState} from 'react';
import {useTranslation} from "react-i18next";
import './textfield.scss'
import FormError from "../FormError/FormError";


interface TextFieldProps {
    ref?: any
    value?: string
    onChange: (s: string) => void
    required?: boolean
    type?: 'text' | 'email' | 'password'
    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 CustomTextField = (
    {
        value,
        onChange,
        required = false,
        type = 'text',
        theme = 'default',
        id = 'fieldId',
        readOnly = false,
        inputMode = 'text',
        placeholder = 'placeholders.please_complete',
        hasError = '',
        maxLength,
        isForGate,
        autoComplete='on',
        onKeyDown,

    }: TextFieldProps) => {
        const {t, i18n} = useTranslation();
        const translatedPlaceholder = t(placeholder);
    //@ts-ignore
    return (
        <>
            <input

                autoComplete={autoComplete}
                readOnly={readOnly}
                type={type}
                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)
                }}
            />
            {hasError &&  <FormError>{hasError}</FormError>}
        </>);
}

export default CustomTextField;