import { KeyboardAvoidingView, TextInput, StyleSheet, View } from "react-native";
import Animated, { useAnimatedKeyboard, useAnimatedStyle } from "react-native-reanimated";
import { Text } from "@/themes";
import { useState } from "react";

export default function Screen() {
  const [content, setContent] = useState(() => {
    return Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join("\n");
  });
  const keyboard = useAnimatedKeyboard();
  const scrollViewStyle = useAnimatedStyle(() => ({
    flex: 1,
    marginBottom: keyboard.height.value,
  }));

  return (
    <KeyboardAvoidingView style={{ flex: 1 }}>
      <View style={{ height: 50, borderWidth: 1, borderColor: "white" }}>
        <Text>Hi</Text>
      </View>
      <Animated.ScrollView style={scrollViewStyle} automaticallyAdjustKeyboardInsets={false}>
        <TextInput
          style={styles.textInput}
          placeholder="Enter extremely long text"
          placeholderTextColor="grey"
          multiline
          scrollEnabled={false}
          value={content}
          onChangeText={setContent}
        />
      </Animated.ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  textInput: {
    width: "100%",
    height: "auto",
    borderColor: "white",
    borderWidth: 1,
    borderRadius: 3,
    padding: 12,
    backgroundColor: "white",
  },
});