import { Image, TouchableOpacity, StyleSheet } from 'react-native';
import { memo } from 'react';
import { Input, View, XStack } from 'tamagui';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';

const styles = StyleSheet.create({
  inputContainer: {
    backgroundColor: '#F9F9F9',
    borderWidth: 0,
    borderRadius: wp(8),
    overflow: 'hidden',
    marginBottom: wp(10),
  },
  phoneInputContainer: {
    paddingRight: wp(11),
  },
  passwordInputContainer: {
    paddingRight: wp(15),
  },
  regionButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: wp(87),
  },
  separator: {
    backgroundColor: '#CCCCCC',
    width: wp(1),
    height: wp(34),
  },
  input: {
    backgroundColor: '#F9F9F9',
    borderWidth: 0,
    height: wp(48),
    fontSize: wp(16),
    color: '#000',
    flex: 1,
  },
  actionButton: {
    marginRight: wp(8),
  },
  eyeButton: {
    paddingLeft: wp(2),
  },
});

export const InputField = ({
  zone,
  label,
  placeholder,
  value,
  onChangeText,
  onClear,
  secureTextEntry = false,
  showPassword,
  onTogglePassword,
  isPhone = false,
  onRegionPress,
}) => {
  return (
    <XStack
      items="center"
      style={[
        styles.inputContainer,
        isPhone ? styles.phoneInputContainer : styles.passwordInputContainer,
      ]}
    >
      {isPhone ? (
        <TouchableOpacity style={styles.regionButton} onPress={onRegionPress}>
          <XStack items="center" gap={wp(7)}>
            <CustomText style={{ color: '#191919', fontSize: wp(16) }}>
              + {zone}
            </CustomText>
            <Image
              style={{ width: wp(8), height: wp(5) }}
              source={require('@/assets/images/icon/arrow.png')}
            />
          </XStack>
        </TouchableOpacity>
      ) : (
        <View style={styles.regionButton}>
          <CustomText style={{ color: '#191919', fontSize: wp(16) }}>
            {label}
          </CustomText>
        </View>
      )}
      <View style={styles.separator} />
      <Input
        style={styles.input}
        borderWidth={0}
        placeholder={placeholder}
        value={value}
        onChangeText={onChangeText}
        secureTextEntry={secureTextEntry}
      />
      {value.length > 0 && (
        <>
          <TouchableOpacity onPress={onClear} style={styles.actionButton}>
            <Image
              style={{ width: wp(18), height: wp(18) }}
              source={require('@/assets/images/icon/check-circle-filled.png')}
            />
          </TouchableOpacity>
          {onTogglePassword && (
            <TouchableOpacity onPress={onTogglePassword} style={styles.eyeButton}>
              <Image
                style={{ width: wp(18), height: wp(12) }}
                source={
                  showPassword
                    ? require('@/assets/images/icon/browse.png')
                    : require('@/assets/images/icon/browse-filled.png')
                }
              />
            </TouchableOpacity>
          )}
        </>
      )}
    </XStack>
  );
};

export default memo(InputField);