<template>

    <div class="contact-form-validation">
        <button class="contact-form-validation__button" @click="$emit('sendEmail')">
            <span>Envoyer</span>
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                <line x1="23" y1="1" x2="10.9" y2="13.1"/>
                <polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
            </svg>
        </button>
        <Transition name="fade-in">
            <div class="contact-form-validation__loader" aria-hidden="true" ref="loader" v-show="isLoading"></div>
        </Transition>
        <Transition name="fade-in-expand-height">
            <div class="contact-form-validation__message" v-show="isValidated" v-click-outside="hideValidationMessage">
                <p class="contact-form-validation__success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
                <p class="contact-form-validation__error" v-else>Une erreur est survenue... Vérifiez les champs saisis ou contactez-moi à l'adresse e-mail contact@paulnicoue.com</p>
            </div>
        </Transition>
    </div>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    // Form validation

    const isValidated = ref(false);
    const isSuccessful = ref(undefined);

    // Loader

    const isLoading = ref(false);
    const loader = ref();

    // --------------------------------------------------
    // LOGIC
    // --------------------------------------------------

    const hideValidationMessage = () => isValidated.value = false;

    // --------------------------------------------------
    // FORWARDING
    // --------------------------------------------------

    defineEmits([
        'sendEmail'
    ]);

    defineExpose({
        isValidated,
        isSuccessful,
        isLoading,
        loader,
        hideValidationMessage
    });

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .contact-form-validation {
        width: 100%;
        display: grid;
        grid:
            'button loader' auto
            'message message' auto
            / auto auto;
        place-content: start stretch;
        place-items: start;
        column-gap: 2rem;
        row-gap: 0.5rem;

        &__button {
            @include button-with-icon;
            grid-area: button;
        }

        &__loader {
            grid-area: loader;
            place-self: center end;
            width: 2.5rem;
            height: 2.5rem;
            border-top: 2px solid var(--primary-accent-color);
            border-right: 2px solid var(--primary-accent-color);
            border-bottom: 2px solid transparent;
            border-radius: 50%;
            animation: rotate-360 800ms linear infinite;
        }

        &__message {
            grid-area: message;
        }

        &__error {
            color: var(--secondary-accent-color);
        }
    }

    // Transition components

    .fade-in-expand-height {

        &-enter-from,
        &-leave-to {
            opacity: 0;
            max-height: 0;
        }

        &-enter-active,
        &-leave-active {
            transition:
                opacity 600ms ease-in-out,
                max-height 600ms ease-in-out;
        }

        &-enter-to,
        &-leave-from {
            max-height: calc(1rem + (4 * var(--caption-font-height)));
        }
    }

    .fade-in {

        &-enter-from,
        &-leave-to {
            opacity: 0;
        }

        &-enter-active,
        &-leave-active {
            transition: opacity 400ms ease-in-out;
        }
    }

</style>
