import { render } from 'solid-js/web'
import { initializeApp } from 'firebase/app'
import { FirebaseProvider } from 'solid-firebase'
import App from './App'

const app = initializeApp({ projectId: 'MY PROJECT ID' })

render(
  () => (
    <FirebaseProvider app={app}>
      <App />
    </FirebaseProvider>
  ),
  document.getElementById('root'),
)

import { Match, Switch } from 'solid-js'
import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'
import { useAuth, useFirebaseApp } from 'solid-firebase'

function Login() {
  const app = useFirebaseApp()
  const signIn = () => signInWithPopup(getAuth(app), new GoogleAuthProvider())

  return <button onClick={signIn}>Sign In with Google</button>
}

function App() {
  const app = useFirebaseApp()
  const state = useAuth(getAuth(app))

  return (
    <Switch fallback={<Login />}>
      <Match when={state.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={state.error}>
        <Login />
      </Match>
      <Match when={state.data}>
        <User data={state.data} />
      </Match>
    </Switch>
  )
}

import { Match, Switch, createMemo, createSignal } from 'solid-js'
import { collection, getFirestore, limit, orderBy } from 'firebase/firestore'
import { useFirebaseApp, useFirestore } from 'solid-firebase'

function App() {
  const app = useFirebaseApp()
  const db = getFirestore(app)
  const todos = useFirestore(collection(db, 'todos'))

  // or for doc reference
  const todo = useFirestore(doc(db, 'todos', 'todo-id'))

  // you can also use an accessor for reactive query
  const [postsLimit] = createSignal(10)
  const postsQuery = createMemo(() => query(
    collection(db, 'posts'),
    orderBy('createdAt', 'desc'),
    limit(postsLimit())
  ))
  const posts = useFirestore(postsQuery)

  return (
    <Switch>
      <Match when={todos.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={todos.error}>
        <p>An error occurred.</p>
      </Match>
      <Match when={todos.data}>
        <TodoList data={todos.data} />
      </Match>
    </Switch>
  )
}

import { Match, Switch } from 'solid-js'
import { getDatabase, ref } from 'firebase/database'
import { useDatabase, useFirebaseApp } from 'solid-firebase'

function App() {
  const app = useFirebaseApp()
  const db = getDatabase(app)
  const todos = useDatabase(ref(db, 'todos'))

  return (
    <Switch>
      <Match when={todos.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={todos.error}>
        <p>An error occurred.</p>
      </Match>
      <Match when={todos.data}>
        <TodoList data={todos.data} />
      </Match>
    </Switch>
  )
}

import { Match, Switch } from 'solid-js'
import { getStorage, ref } from 'firebase/storage'
import { useDownloadURL, useFirebaseApp } from 'solid-firebase'

function App() {
  const app = useFirebaseApp()
  const storage = getStorage(app)
  const data = useDownloadURL(ref(
    storage,
    'images/yourimage.jpg',
  ))

  // or with an accessor
  const [location] = createSignal('images/yourimage.jpg')
  const downloadRef = createMemo(() => ref(storage, location()))
  const data = useDownloadURL(downloadRef)

  return (
    <Switch>
      <Match when={data.loading}>
        <p>Download URL: Loading...</p>
      </Match>
      <Match when={data.error}>
        <p>Error: {data.error?.name}</p>
      </Match>
      <Match when={data()}>
        <img src={data()} alt="pic" />
      </Match>
    </Switch>
  )
}