<template>
  <div class="hidden sm:block" style="height: 40px"></div>

  <div>
  <div class="flex flex-col lg:flex-row items-center justify-center">
    <div class="max-w-[700px] min-w-[300px]">
      <img class="rounded-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
    </div>

    <div class="flex flex-col items-center min-w-[300px] m-12">
      <h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>
      
      <google-login class="w-full" :callback="googleCallback" popup-type="TOKEN">
        <template #default>
          <v-btn density="comfortable" class="mb-2 w-full">
            <v-icon left>mdi-google</v-icon>
            Google
          </v-btn>
        </template>
      </google-login>

<!--      <v-btn density="comfortable" class="mb-2 w-full">-->
<!--        <v-icon left>mdi-facebook</v-icon>-->
<!--        Facebook-->
<!--      </v-btn>-->           
  
      <div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>

      <v-btn density="comfortable" class="mb-2 w-full" @click="showEmailForm = !showEmailForm">
        <v-icon left>mdi-account</v-icon>
        Utilisateur
      </v-btn>

      <div v-if="showEmailForm" class="w-full mt-2">
        <v-text-field v-model="user.email"
            label="Courriel"
            variant="outlined"
            dense
            prepend-inner-icon="mdi-email"
            color="transparent"
            class="text-black"
        ></v-text-field>

        <v-text-field v-model="user.password"
            label="Mot de passe"
            :type="showPassword ? 'text' : 'password'"
            variant="outlined"
            dense
            prepend-inner-icon="mdi-lock"
            append-inner-icon="mdi-eye"
            @click:append-inner="showPassword = !showPassword"
            color="transparent"
            class="text-black"
        ></v-text-field>

        <v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter</v-btn>

        <p class="mt-4 text-sm text-center">
          Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez ici</a> pour en créer un.
        </p>

        <div v-if="errorSnackBar" class="mb-4 text-red-600">
          Nom d'utilisateur ou mot de passe invalide.
          <button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
        </div>
      </div>
    </div>
  </div>
  </div>
 

  <selected-footer></selected-footer>
  
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useClient } from "@/plugins/api.js";
import { auth } from '@/stores/auth.js';
import { GoogleLogin } from "vue3-google-login";
// import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
import SelectedFooter from "@/views/main/SelectedFooter.vue";

const api = useClient();
const store = auth();
const router = useRouter();

const user = ref({});
const errorSnackBar = ref(false);
const showEmailForm = ref(false);
const showPassword = ref(false);

async function login() {
  try {
    await store.login(api, user.value.email, user.value.password);
    await router.push('/');
    window.location.reload();
  } catch (error) {
    errorSnackBar.value = true;
  }
}

const googleCallback = async (response) => {
  await store.loginGoogle(api, response["access_token"]);
  await router.push("/");
};

// const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
// const facebookCallback = (response) => {
//   console.log("User Successfully Logged In", response);
// };
</script>
