<script lang="ts">
  import Router from '$router/Router.svelte'
  import { mode, ModeWatcher } from 'mode-watcher'
  import Header from '$lib/components/Header.svelte'
  import { Toaster } from 'svelte-sonner'

  import { onMount } from 'svelte'
  import { appConfigDir } from '@tauri-apps/api/path'
  import Database from 'tauri-plugin-sql-api'

  onMount(async () => {
    console.log(await appConfigDir())
    window.invoke = window.__TAURI_INVOKE__
    const db = await Database.load('sqlite:food.db')

    await db.execute(
      'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER);'
    )

    type User = {
      id: number
      name: string
      age: number
    }

    await db.execute('INSERT INTO users (name, age) VALUES (\'John\', 30);')
    const user = await db.select<User>('SELECT * FROM users WHERE name = $1;', [
      'John'
    ])

    console.log(user)
  })
</script>

<ModeWatcher defaultMode="dark" />
<Toaster theme={$mode} />

<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
  <Header />
  <main class="flex-1">
    <Router />
  </main>
</div>
