import React, {forwardRef, useImperativeHandle, useRef, useState} from "react";
import {
	ColorValue,
	DimensionValue,
	Keyboard,
	KeyboardTypeOptions,
	ReturnKeyTypeOptions,
	StyleProp,
	TextInput,
	TouchableOpacity,
	View,
	ViewStyle,
} from "react-native";

import Icon from "@components/icon";

import Images from "@config/Images";
import {iComponentProps} from "@config/types/CommonInterface";
import {ComponentIdType} from "@config/types/CommonTypes";

import {useThemeAwareObject} from "@styles/theming/ThemingHelper";
import Typography from "@styles/Typography";
import {hp, wp} from "@utils/ResponsiveScreenUtil";

import Styles from "./Styles";

type OnChangeTextType = (id: string | number | null, text: string) => void;
interface iTextInputProps extends iComponentProps<ViewStyle> {
	/** Id of an element */
	id?: ComponentIdType;
	/** Width of input */
	width?: DimensionValue | undefined;
	/** height of input */
	height?: DimensionValue | undefined;
	/** border effect of input when in focus */
	onFocusBorderColor?: string;
	/** border effect of input when in blur */
	onBlurBorderColor?: string;
	/** background color of the input */
	backgroundColor?: string;
	/** border width of the input */
	borderWidth?: number;
	/** editable (default : true) */
	editable?: boolean;
	/** container style */
	containerStyle?: StyleProp<ViewStyle>;
	/** secure entry text (default : false) */
	isSecure?: boolean;
	/** placeholder text */
	placeholder: string;
	/** placeholder text color */
	placeholderTextColor?: string;
	/** textinput text color */
	textColor?: string;
	/** textinput font size */
	fontSize?: number;
	/** keyBoard Type (default: 'default') */
	keyBoardType?: KeyboardTypeOptions;
	/** Callback function when pressed */
	onChangeText: OnChangeTextType;
	/* value of the input field */
	value?: string;
	/* max characters allowed in the input */
	maxLength?: number;
	/* On Submit Editing */
	onSubmitEditing?: () => void;
	/* Return Key Type Options */
	returnKey?: ReturnKeyTypeOptions;
	multiline?: boolean | undefined;
	autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
}

interface iTextInputRef {
	focus: () => void;
}

// eslint-disable-next-line react/display-name
const Input = forwardRef<iTextInputRef, iTextInputProps>(
	(
		{
			id = null,
			width = "100%",
			height = hp(40),
			onFocusBorderColor = undefined,
			onBlurBorderColor = undefined,
			backgroundColor = undefined,
			borderWidth = 1.2,
			editable = true,
			containerStyle,
			isSecure = false,
			placeholder = "...",
			placeholderTextColor = undefined,
			textColor = undefined,
			fontSize = Typography.fontSizes.FONT_SIZE_17,
			keyBoardType = "default",
			onChangeText,
			value = "",
			maxLength,
			onSubmitEditing,
			returnKey = "default",
			multiline = false,
			autoCapitalize = "none",
		},
		ref,
	) => {
		const styles = useThemeAwareObject(Styles.createStyles);

		const [borderColor, setBorderColor] = useState<
			string | undefined | ColorValue
		>(onBlurBorderColor);
		const [isSecureEntry, setSecureEntry] = useState(isSecure);
		const reference = useRef<TextInput>(null);

		const onChange = (text: string) => {
			onChangeText(id, text);
		};

		const onFocus = () => {
			setBorderColor(
				onFocusBorderColor || styles.themeVariables.onFocusBorderColor,
			);
		};

		const onBlur = () => {
			setBorderColor(
				onBlurBorderColor || styles.themeVariables.onBlurBorderColor,
			);
		};

		/* Forwarding ref to parent */
		useImperativeHandle(ref, () => {
			return {
				focus: () => {
					Keyboard.dismiss();
					setTimeout(() => {
						reference.current?.focus();
					}, 100);
				},
			};
		});

		const renderSecureIcon = () => {
			if (isSecure) {
				return (
					<TouchableOpacity
						activeOpacity={1}
						key={`${isSecureEntry}`}
						style={styles.secureContainer}
						onPress={() => {
							return setSecureEntry(!isSecureEntry);
						}}
					>
						{!isSecureEntry ? (
							<Icon
								Image={Images.svgIcons.passwordShow}
								disabled
								color={styles.themeVariables.showHideIconBgColor}
							/>
						) : (
							<Icon
								Image={Images.svgIcons.passwordHide}
								disabled
								color={styles.themeVariables.showHideIconBgColor}
							/>
						)}
					</TouchableOpacity>
				);
			}
			return null;
		};

		return (
			<View
				style={[
					styles.container,
					{
						height,
						width,
						borderColor: borderColor || styles.themeVariables.onBlurBorderColor,
						borderWidth,
						backgroundColor:
							backgroundColor || styles.themeVariables.backgroundColor,
					},
					containerStyle,
				]}
			>
				<TextInput
					ref={reference}
					multiline={multiline}
					autoCapitalize={autoCapitalize}
					style={[
						styles.textInput,
						{
							width,
							color: textColor || styles.themeVariables.textColor,
							paddingRight: isSecure ? wp(50) : wp(10),
							fontSize,
							textAlignVertical: multiline ? "top" : "center",
						},
					]}
					onFocus={onFocus}
					keyboardType={keyBoardType}
					placeholder={placeholder}
					secureTextEntry={isSecureEntry}
					placeholderTextColor={
						placeholderTextColor || styles.themeVariables.placeholderTextColor
					}
					onBlur={onBlur}
					editable={editable}
					onChangeText={onChange}
					value={value}
					maxLength={maxLength}
					onSubmitEditing={onSubmitEditing}
					returnKeyType={returnKey}
				/>
				{renderSecureIcon()}
			</View>
		);
	},
);

export default Input;
export type {OnChangeTextType}; 
this is my input.tsx file make sure it changes here as well accordingly this is my code : <TextInput
					placeholder={translate(translationKeys.EmailPlaceholder)}
					keyBoardType="email-address"
					value={email}
					onChangeText={onChangeTextEmail}
				/>
				<TextInput
					containerStyle={styles.textInputContainer}
					placeholder={translate(translationKeys.PasswordPlaceholder)}
					isSecure
					value={password}
					onChangeText={onChangeTextPassword}
				/> now if the user clicks on email section it should ,make isSecure false else it should be true how can i achieve this