import {
  StyleSheet,
  TextInput,
  View,
  ViewStyle,
  TextInputProps as RNTextInputProps,
  TouchableOpacity,
} from 'react-native';
import React, {useState} from 'react';
import PlayyText from '../PlayyText/PlayyText';
import {useTheme, ColorsScheme} from '../../theme/ThemeContext';
import {FontConfig, useFontConfig} from '../../font/FontContext';
interface PlayyTextInputProps {
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  containerStyle?: ViewStyle;
  inputStyle?: ViewStyle;
  multiline?: boolean;
  maxLength?: number;
  keyboardType?: RNTextInputProps['keyboardType'];
  autoCapitalize?: RNTextInputProps['autoCapitalize'];
  secureTextEntry?: boolean;
  editable?: boolean;
  label?: string;
  showIcon?: boolean;
  topSeparator?: boolean;
  bottomSeparator?: boolean;
  rightIconName?: string;
  autoFocus?: boolean;
  handleIconPress?: () => void;
}
const PlayyTextInput: React.FC<PlayyTextInputProps> = ({
  value,
  onChangeText,
  placeholder = '',
  containerStyle,
  inputStyle,
  multiline = false,
  maxLength,
  keyboardType = 'default',
  autoCapitalize = 'sentences',
  secureTextEntry = false,
  editable = true,
  label,
  showIcon,
  topSeparator = false,
  bottomSeparator = false,
  rightIconName,
  autoFocus = true,
  handleIconPress,
}) => {
  const {colors} = useTheme();
  const fonts = useFontConfig();
  const styles = themedStyle(colors, fonts);
  const [isFocused, setIsFocused] = useState(false);

  return (
    <View
      style={[
        styles.container,
        {
          borderTopWidth: topSeparator ? 1 : 0,
          borderBottomWidth: bottomSeparator ? 1 : 0,
        },
        containerStyle,
      ]}>
      <View style={styles.textInputContainer}>
        {label && (
          <PlayyText
            numberOfLines={1}
            color={colors.labels_secondary}
            FootnoteRegular>
            {label}
          </PlayyText>
        )}
        <TextInput
          style={[styles.input, inputStyle]}
          value={value}
          onChangeText={onChangeText}
          placeholder={placeholder}
          placeholderTextColor={colors.labels_tertiary}
          multiline={multiline}
          maxLength={maxLength}
          keyboardType={keyboardType}
          autoCapitalize={autoCapitalize}
          secureTextEntry={secureTextEntry}
          editable={editable}
          selectionColor={colors.labels_primary}
          autoFocus={autoFocus}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
      </View>

      {isFocused && (
        <TouchableOpacity
          onPress={handleIconPress}
          style={styles.iconContainer}>
          <PlayyText color={colors.labels_secondary} BodyEmphasized>
            {rightIconName}
          </PlayyText>
        </TouchableOpacity>
      )}
    </View>
  );
};

export default PlayyTextInput;

const themedStyle = (colors: ColorsScheme, fonts: FontConfig) =>
  StyleSheet.create({
    container: {
      width: '100%',
      borderRadius: 16,
      borderColor: colors.separator_non_opaque,
      padding: 16,
      height: 54,
      justifyContent: 'space-between',
      backgroundColor: colors.background_grouped_secondary,
      flexDirection: 'row',
      alignItems: 'center',
    },
    textInputContainer: {
      flex: 1,
      marginRight: 8,
    },
    input: {
      color: colors.labels_primary,
      textAlignVertical: 'top',
      fontSize: 17,
      fontFamily: fonts.regular,
      fontWeight: 400,
      letterSpacing: -0.1,
      lineHeight: 22,
    },
    iconContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      minWidth: 24,
      height: 24,
    },
  });