<template>
  <div class="pa-3">
    <v-row
      class="h-100vh auth"
      justify="center"
    >
      <v-col
        cols="12"
        sm="8"
        md="8"
        lg="8"
        class="d-flex align-center justify-center bg-surface"
      >
        <div class="mt-xl-0 mt-5 mw-100 text-center">
          <div
            class="px-8"
            style="max-width: 500px"
          >
            <PublicAppLogo />
            <h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium">
              <v-btn
                block
                color="primary"
                text="Sign in"
                @click="doLogin"
              />
            </h6>

            <!--
             <v-btn
              block
              variant="outlined"
              color="primary"
              class="mt-3"
              :to="{ name: 'SignUpPage' }"
              text="Sign Up"
            /> -->
            <div
              v-if="isAuthenticated"
              class="mt-5 text-center"
            >
              <v-btn
                color="warning"
                variant="text"
                @click="logoutWrapper"
                >Sign out</v-btn
              >
            </div>
          </div>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
import { useAuth0 } from "@auth0/auth0-vue"

import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
import useCurrentUser from "@/use/use-current-user"

const { reset: resetCurrentUser } = useCurrentUser()
const { isAuthenticated, loginWithRedirect, logout } = useAuth0()

onMounted(() => {
  resetCurrentUser()
})

function doLogin() {
  loginWithRedirect({
    appState: { target: "/dashboard" },
  })
}
async function logoutWrapper() {
  await logout({
    logoutParams: {
      returnTo: window.location.origin,
    },
  })
}
</script>
