<script setup >

definePageMeta({
  layout: "notLoggedIn"
})

const supabase = useSupabaseClient()
const user = useSupabaseUser()
const router = useRouter()
const colorMode = useColorMode()
const dataStore = useDataStore()

const isLight = computed({
  get () {
    return colorMode.value !== 'dark'
  },
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})


const email = ref("")
const password = ref("")

const fields = [{
  name: 'email',
  type: 'text',
  label: 'Email',
  placeholder: 'E-Mail Adresse'
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  placeholder: 'Passwort'
}]


const onSubmit = async (data) => {

  const {error, data:{ user}} = await supabase.auth.signInWithPassword({
    email: data.email,
    password: data.password
  })
  if(error) {
    console.log(error.toString())
  } else {
    console.log("Login Successful")
    dataStore.initializeData(user.id)
    router.push("/")


  }
}

</script>

<template>
<!--  <div id="loginSite">
    <div id="loginForm">
      <UFormGroup
          label="E-Mail:"
      >
        <UInput
            v-model="email"
        />
      </UFormGroup>
      <UFormGroup
          label="Passwort:"
      >
        <UInput
            v-model="password"
            type="password"
            @keyup.enter="onSubmit"
        />
      </UFormGroup>
      <UButton
          @click="onSubmit"
          class="mt-3"
      >
        Einloggen
      </UButton>
    </div>

  </div>-->
  <UCard class="max-w-sm w-full mx-auto mt-5">

    <UColorModeImage
      light="/Logo.png"
      dark="/Logo_Dark.png"
    />

<!--    <img
        :src="!isLight  ? '/spaces.svg' : '/spaces_hell.svg'"
        alt="Logo"
        class="w-full mx-auto"
    />-->

    <UAuthForm
        title="Login"
        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu bekommen"
        align="bottom"
        :fields="fields"
        :loading="false"
        @submit="onSubmit"
    >

    </UAuthForm>
  </UCard>



</template>

<style scoped>
#loginSite {
  display: flex;
  align-content: center;
  justify-content: center;

}

#loginForm {
  width: 30vw;
  height: 30vh;
}
</style>