import { bootstrapSupabaseProvider} from "https://cdn.jsdelivr.net/npm/bootstrap-supabase-provider@1.0.4";

// Basic Config - Opens a modal and asks user for Supabase details 🔧
const { supabase, url, anonKey } = await bootstrapSupabaseProvider();

// Example query 📊
const { data, error } = await supabase.from("todos").select("*");
console.log(data, error);

// Always Show Modal - even if user has provided configuration before 🔄
const config1 = await bootstrapSupabaseProvider({ show: true });

// Custom Labels and Help 🎨
const config2 = await bootstrapSupabaseProvider({
  title: "Connect to Database",
  urlLabel: "Database URL", 
  keyLabel: "API Key",
  buttonLabel: "Connect",
  help: '<div class="alert alert-info">Get your credentials from <a href="https://supabase.com/dashboard">Supabase Dashboard</a></div>',
});

// Custom Storage - store in sessionStorage 💾
const config3 = await bootstrapSupabaseProvider({
  storage: sessionStorage,
  key: "mySupabaseConfig"
});

async function bootstrapSupabaseProvider({
  storage: localStorage,                           // where to store config, e.g. sessionStorage 💾
  key: "bootstrapSupabaseProvider_config",         // key name for storage 🔑
  show: false,                                     // true will force prompt even if config exists 👁️
  help: "",                                        // HTML rendered at top of modal 💡
  title: "Supabase Configuration",                 // modal dialog title 📝
  urlLabel: "Supabase URL",                        // URL input label 🌐
  keyLabel: "Supabase Anon Key",                   // API key input label 🔐
  buttonLabel: "Connect to Supabase",              // submit button label 🔗
})
// Returns: { supabase, url, anonKey } ✅