<script
    setup
    lang="ts"
>
    import { computed, ref } from 'vue';
    import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';

    const auth_api = useAuthApi();

    const email = defineModel<string>('email', { default: '', });
    const is_remembered = ref<boolean>(false);
    const is_employee_email = computed(() => email.value.includes('@targ'));
</script>

<template>
    <q-card class="rounded-15 shadow-10">
        <q-card-section class="text-center bg-primary q-pa-lg">
            <q-img
                src="/src/assets/logo-targo-white.svg"
                ratio="4.6"
                fit="contain"
            />
        </q-card-section>

        <div class="q-pt-sm q-px-xl q-pb-lg ">
            <q-card-section class="text-center text-uppercase">
                <div class="text-h6 text-weight-bold">
                    {{ $t('login.page_header') }}
                </div>
            </q-card-section>

            <q-form @submit="auth_api.login">
                <q-input
                    v-model="email"
                    dense
                    outlined
                    label-color="accent"
                    class="rounded-5 inset-shadow bg-blue-grey-1"
                    label-slot
                    input-class="text-weight-medium text-h6"
                >
                    <template #label>
                        <span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>
                    </template>
                </q-input>

                <q-card-section
                    horizontal
                    class="q-mb-md q-pa-none text-uppercase text-caption text-weight-medium"
                >
                    <q-toggle
                        v-model="is_remembered"
                        size="sm"
                        color="accent"
                        class="col-auto"
                    />

                    <transition
                        enter-active-class="animated rubberBand fast"
                        leave-active-class=""
                        mode="out-in"
                    >
                        <span
                            :key="is_remembered ? 'yep' : 'nope'"
                            class="col-auto text-weight-bold self-center q-ml-sm"
                            :class="is_remembered ? 'text-accent' : ''"
                        >{{ $t('login.button.remember_me') }}</span>
                    </transition>
                </q-card-section>

                <q-card-actions>
                    <q-btn
                        push
                        rounded
                        disabled
                        type="submit"
                        color="accent"
                        :label="$t('login.button.connect')"
                        class="full-width"
                    />
                </q-card-actions>

                <!-- A implémenter plus tard sans doute, pour les clients. A revoir avec Authentik API pour création de users -->
                <!-- <q-card-section class="text-center q-pa-none q-mt-none">
                    <RouterLink disabled class="text-primary" to="/signup">{{ $t('loginPage.signUp') }}</RouterLink>
                </q-card-section> -->
            </q-form>

            <q-card-section class="row q-pt-sm">
                <q-separator
                    size="2px"
                    color="primary"
                    class="col self-center"
                />
                <span class="col text-primary text-weight-bolder text-center text-uppercase self-center">{{
                    $t('shared.misc.or') }}</span>
                <q-separator
                    size="2px"
                    color="primary"
                    class="col self-center"
                />
            </q-card-section>

            <q-card-section class="column q-px-sm q-pt-none">
                <q-btn
                    rounded
                    push
                    disabled
                    color="fb-blue"
                    icon="img:src/assets/Facebook-f_Logo-White-Logo.wine.svg"
                    :label="$t('login.button.facebook')"
                    class="full-width row q-mb-sm"
                >
                    <q-tooltip
                        anchor="top middle"
                        class="bg-primary"
                    >{{ $t('login.tooltip.coming_soon') }}</q-tooltip>
                </q-btn>
                <q-slide-transition>
                    <div v-if="is_employee_email">
                        <transition
                            slow
                            enter-active-class="animated zoomIn"
                            leave-active-class="animated zoomOut"
                        >
                            <q-btn
                                push
                                rounded
                                color="accent"
                                icon="img:src/assets/logo-targo-simple.svg"
                                :label="$t('login.button.employee')"
                                class="full-width row"
                                @click="auth_api.oidcLogin"
                            />
                        </transition>
                    </div>
                </q-slide-transition>
            </q-card-section>
        </div>
    </q-card>
</template>