import { View, Text, TextInput, StyleSheet, } from 'react-native';
import React, { useState } from 'react';
import { GlobalTheme } from '../theme';

const CustomTextInput = ({
  label,
  value,
  onChangeText,
  keyboardType,
  secureTextEntry,
  right,
  textstyle,
  viewstyle,
  maxLength
}) => {
  const [isFocused, setFocused] = useState(false);
  const [hidepassword, setHidePassword] = useState(false);

  const handleFocus = () => {
    setFocused(true);
  };

  const handleBlur = () => {
    setFocused(false);
  };

  const inputStyle = {
    borderColor: isFocused ? '#2680EB' : '#DFDFDF',
    borderWidth: isFocused ? 2 : 1,
    backgroundColor: isFocused ? '#FFF' : '#Fff',
    borderRadius: GlobalTheme.borderRadius.md,
  };

  return (
    <View style={styles.inputContainer}>
      <Text
        style={{
          color: GlobalTheme.colors.black,
          fontSize: GlobalTheme.typography.fontSize.medium,
          fontWeight: GlobalTheme.typography.fontWeight.medium,
          marginTop: 10,
          marginHorizontal: 10,
          ...textstyle,
        }}>
        {label}
      </Text>
      <View
        style={{
          borderRadius: GlobalTheme.borderRadius.lgg,
          borderWidth: 6,
          borderColor: isFocused ? '#DFECFF' : 'transparent',
          marginTop: 8,
          ...viewstyle,
        }}>
        <TextInput
          maxLength={maxLength}
          style={[styles.input, inputStyle]}
          value={value}
          onChangeText={onChangeText}
          keyboardType={keyboardType}
          autoCapitalize="none"
          onFocus={handleFocus}
          onBlur={handleBlur}
          placeholder={`Enter your ${label.toLowerCase()}`}
          placeholderTextColor={'#555555'}
        />

      </View>
    </View>
  );
};

export default CustomTextInput;

const styles = StyleSheet.create({
  input: {
    height: 50,
    borderWidth: 1,
    padding: 10,
    borderRadius: 4,
    color: GlobalTheme.colors.black,
  },
  inputContainer: {
    marginBottom: 16,
  },
});