<script setup >

import {useProfileStore} from "~/stores/profile.js";
import {useCapacitor} from "~/composables/useCapacitor.js";

definePageMeta({
  layout: "notLoggedIn"
})

const supabase = useSupabaseClient()
const user = useSupabaseUser()
const router = useRouter()
const colorMode = useColorMode()
const toast = useToast()
const profileStore = useProfileStore()

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 authenticateWithAzure = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'azure',
    options: {
      scopes: 'email',
    },
  })

  console.log(data)
  console.log(error)
}

const onSubmit = async (data) => {

  const {error, data:{ user}} = await supabase.auth.signInWithPassword({
    email: data.email,
    password: data.password
  })
  if(error) {
    if(error.toString().toLowerCase().includes("invalid")){
      toast.add({title:"Zugangsdaten falsch",color:"rose"})
    }

  } else {
    //console.log("Login Successful")
    profileStore.initializeData(user.id)

    if(await useCapacitor().getIsPhone()) {
      router.push("/mobile")
    } else {
      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"
    />

    <UAuthForm
        title="Login"
        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
        align="bottom"
        :fields="[{
            name: 'email',
            type: 'text',
            label: 'Email',
            placeholder: 'Deine E-Mail Adresse'
          }, {
            name: 'password',
            label: 'Passwort',
            type: 'password',
            placeholder: 'Dein Passwort'
          }]"
        :loading="false"
        @submit="onSubmit"
        :providers="[{label: 'MS365',icon: 'i-simple-icons-microsoft',color: 'gray',click: authenticateWithAzure}]"
        :submit-button="{label: 'Weiter'}"
        divider="oder"
    >

    </UAuthForm>
  </UCard>



</template>

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

}

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