import migrations from "@/drizzle/migrations";
import { NoteProvider } from "@/providers/NoteProvider";
import { useAuth } from "@/utils/AuthProvider";
import { Ionicons } from "@expo/vector-icons";
import { drizzle } from "drizzle-orm/expo-sqlite";
import { useMigrations } from "drizzle-orm/expo-sqlite/migrator";
import { Stack } from "expo-router";
import { SQLiteProvider, openDatabaseSync } from "expo-sqlite";
import { useDrizzleStudio } from "expo-drizzle-studio-plugin";
import { cssInterop } from "nativewind";
import React, { Suspense } from "react";
import { ActivityIndicator, StyleSheet, TouchableOpacity } from "react-native";

cssInterop(Ionicons, {
  className: {
    target: "style",
    nativeStyleToProp: { color: true },
  },
});
const Page = () => {
  const { logout } = useAuth();

  const expoDb = openDatabaseSync("notes.db");

  useDrizzleStudio(expoDb);

  const db = drizzle(expoDb);
  const { success, error } = useMigrations(db, migrations);

  return (
    <Suspense fallback={<ActivityIndicator size="large" />}>
      <SQLiteProvider
        databaseName="notes.db"
        options={{ enableChangeListener: true }}
        useSuspense
      >
        <NoteProvider>
          <Stack>
            <Stack.Screen
              name="home"
              options={{
                title: "Voice Notes",
                headerRight: () => (
                  <TouchableOpacity className="p-2" onPress={logout}>
                    <Ionicons
                      name="log-out"
                      size={24}
                      className="color-blue-500"
                    />
                  </TouchableOpacity>
                ),
              }}
            />
          </Stack>
        </NoteProvider>
      </SQLiteProvider>
    </Suspense>
  );
};

export default Page;

const styles = StyleSheet.create({});