<template>
	<ButtonComponent
		class="facebook border border-transparent text-white"
		@click="facebookLogin"
		:loading="loading"
	>
		<svg
			width="16px"
			height="16px"
			fill="#fff"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 512 512"
		>
			<path
				d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
			/>
		</svg>
		<!--		<span class="text-white">{{ text }}</span>-->
	</ButtonComponent>
</template>

<script setup>
const ButtonComponent = Vue.defineAsyncComponent(
	async () =>
		await loadModule(`${SAS_URL}/src/components/login/social-medias/Button.vue`, options)
);

const {init, signIn, signOut} = useFacebookAuth()

const emit = defineEmits(['login'])

const loading = Vue.ref(false)
// const text = Vue.computed(() => {
// 	return loading.value ? 'Loading' : 'Continue with Facebook'
// })

const authSocial = useAuthSocialStore()
const facebookLogin = async () => {
	if (!!useUserStore().getUser) return

	await init()

	const fb_data = await signIn()
	loading.value = true

	if (fb_data.signedIn) {
		const payload = {
			login: {
				email: fb_data.userData.email,
				first_name: fb_data.userData.firstName,
				last_name: fb_data.userData.lastName,
				id: fb_data.userData.id,
			},
		}

		const {data} = await authSocial.loginFacebook(payload)

		if (data.success) {
			emit('login', data.data.result)
		} else {
			console.error(data.message)
			await signOut()
		}
	}

	loading.value = false
}
</script>

<style scoped>
.facebook {
	background-color: #3a5498;
}
</style>
