import { View, Text, TextInput, Pressable } from "react-native";
import { useLocalSearchParams } from "expo-router";
import BaseBackground from "../../components/BaseBackground";
import { useThemeStore } from "../../stores/ThemeStore";

const NoteScreen = () => {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { theme } = useThemeStore();

  // TODO: Fetch event by id using EventService.getById()
  // TODO: Display and edit the event's note field
  // TODO: Auto-save or manual save button
  // TODO: Save changes -> EventService.update({ note: ... })
  // TODO: Loading and error states
  throw new Error("Not implemented");

  return (
    <BaseBackground>
      <View className="flex-1 p-4">
        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>
          Note
        </Text>
        <Text className="mb-4" style={{ color: theme.textSecondary }}>
          Event ID: {id}
        </Text>
        <TextInput
          placeholder="Write your note here..."
          placeholderTextColor={theme.textMuted}
          multiline
          className="w-full border rounded p-2 flex-1 mb-4"
          textAlignVertical="top"
          style={{
            color: theme.textPrimary,
            borderColor: theme.borderPrimary,
            backgroundColor: theme.secondaryBg,
          }}
        />
        <Pressable
          className="p-3 rounded"
          style={{ backgroundColor: theme.confirmButton }}
        >
          <Text className="text-center" style={{ color: theme.buttonText }}>
            Save Note
          </Text>
        </Pressable>
      </View>
    </BaseBackground>
  );
};

export default NoteScreen;
