import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import close from '../../../../assets/images/close.svg';
import {ReactComponent as VisibleIcon} from '../../../../assets/images/eye-show.svg';
import {ReactComponent as HiddenIcon} from '../../../../assets/images/eye-hide.svg';
import FormError from '../../FormError/FormError';
import './textfield.scss';

interface CustomTextFieldProps {
    value?: string | any;
    onChange: (s: string) => void;
    required?: boolean;
    type?: 'text' | 'email' | 'password';
    theme?: 'afm-form' | 'user-form-field';
    id?: string;
    readOnly?: boolean;
    inputMode?: 'text' | 'numeric';
    placeholder?: string;
    hasError?: string;
    maxLength?: number;
    autoComplete?: string;
    onKeyDown?: any;
    clearable?: boolean;
    title?: string;
    wrap?: boolean;
}

const CustomTextField = ({
                             value = '',
                             onChange,
                             id,
                             required = false,
                             type = 'text',
                             theme = 'user-form-field',
                             readOnly = false,
                             inputMode = 'text',
                             placeholder = 'placeholders.please_complete',
                             hasError = '',
                             maxLength,
                             autoComplete = 'on',
                             onKeyDown,
                             clearable = true,
                             title,
wrap = false,
                         }: CustomTextFieldProps) => {
    const {t} = useTranslation();
    const translatedPlaceholder = t(placeholder);
    const [inputType, setInputType] = useState<string>(type);
    const [inputValue, setInputValue] = useState<string>('');
    const handleTypeToggle = () => {
        setInputType((prevType) => (prevType === 'password' ? 'text' : 'password'));
    };


    const handleClear = () => {
        // const inputElement = document.getElementById(id) as HTMLInputElement;
        // inputElement.value = ''; // Clear the input value
        onChange(''); // Call onChange with an empty string
        setInputValue('');
    };

    return (
        <div className={`text-input-wrapper ${hasError && 'hasError'}`}>
            {wrap && readOnly ? (
                <div
                    id={id}
                    title={title}
                    className={`text-field ${theme} disable wrapped`}
                >
                    {value || ''}
                </div>
            ) : (
                <input
                    title={readOnly ? title : undefined}
                    autoComplete={autoComplete}
                    readOnly={readOnly}
                    type={inputType}
                    id={id}
                    required={required}
                    inputMode={inputMode}
                    placeholder={readOnly ? '' : translatedPlaceholder}
                    maxLength={maxLength}
                    className={`text-field ${theme} ${readOnly && 'disable'}`}
                    value={value ?? ''}
                    onChange={(e) => {
                        setInputValue(e.target.value);
                        onChange(e.target.value);
                    }}
                    onKeyDown={onKeyDown}
                />
            )}

            {(clearable && value && !readOnly && value.length > 0 || inputValue) &&

                (<img src={close} className={"clear"} onClick={handleClear}/>)

            }

            {
                type === 'password' &&
                <div className="type-toggler">
                    {inputType === 'password' ?
                        (<HiddenIcon onClick={handleTypeToggle} width="24px"/>) :
                        (<VisibleIcon onClick={handleTypeToggle} width="24px"/>)
                    }
                </div>
            }


            {hasError &&
                <>
                    <div className="w-100"></div>
                    <FormError>{hasError}</FormError>
                </>
            }
        </div>
    );
};

export default CustomTextField;