<template>
  <div class="tw:h-screen tw:flex tw:flex-col tw:bg-white tw:overflow-auto">
    <div class="tw:ml-4 tw:mt-4 tw:w-[462px] tw:self-start">
      <img width="233" src="/login-logo.png" />
    </div>

    <div
      class="tw:flex tw:flex-1 tw:w-full tw:items-center tw:justify-center tw:text-black"
    >
      <div class="tw:flex tw:w-[462px] tw:flex-col tw:gap-12">
        <div class="tw:p-6">
          <div class="tw:text-3xl">
            {{ $t("core.authentication.headline") }}
          </div>
          <div class="tw:text-sm tw:text-[#898989]">
            {{ $t("core.authentication.subheadline") }}
          </div>
        </div>

        <LoginForm @submit="onSubmitLogin" />
      </div>
    </div>
  </div>
  <SnackStack />
</template>

<script setup lang="ts">
import { onMounted } from "vue"
import LoginForm from "./components/authentication/LoginForm.vue"
import type { LoginResponse } from "@racletteCore/types"
import SnackStack from "./components/snackbar/SnackStack.vue"
import loginUserNotifications from "./helpers/loginUserNotifications"
import { userNotifier } from "@racletteCore/exports"

const props = withDefaults(
  defineProps<{
    loginMethod?: ({
      email,
      password,
    }: {
      email: string
      password: string
    }) => Promise<LoginResponse>
    noUsers: boolean
  }>(),
  { loginMethod: undefined },
)

const onSubmitLogin = async (loginPayload: {
  email: string
  password: string
}) => {
  if (props.loginMethod) {
    const { success, message, redirect } = await props.loginMethod(loginPayload)
    if (success) {
      redirect?.()
    } else if (message) {
      userNotifier.add(message, "error")
    }
  }
}

// check if we have a message from checkToken to display as a snackbar
onMounted(() => loginUserNotifications())
</script>
