<script setup>
import coverImg from "@images/pages/membershipBanner.jpg";
import { onMounted } from "vue";
import { useStore } from "vuex";
const store = useStore();
const profileHeaderData = ref(null)
const props = defineProps({
    userData: {
        type: Object,
        required: true,
    },
})
onMounted(async () => {
    store.dispatch("updateIsLoading", true);
    profileHeaderData.value = props.userData;
    console.log('profileHeaderData', profileHeaderData)
    store.dispatch("updateIsLoading", false);
});
</script>

<template>
    <VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <VCard v-if="profileHeaderData">
        <VImg :src="coverImg" min-height="125" max-height="250" cover />

        <VCardText class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-6">
            <div class="d-flex h-0">
                <VAvatar rounded size="130" :image="profileHeaderData.profile_picture"
                    class="user-profile-avatar mx-auto">
                    <VImg :src="profileHeaderData.profile_picture" height="120" width="120" />
                </VAvatar>
            </div>

            <div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
                <h4 class="text-h4 text-center text-sm-start mb-2">
                    {{ profileHeaderData.first_name + ' ' + profileHeaderData.last_name }}
                </h4>

                <div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
                    <div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6">
                        <div class="d-flex align-center gap-x-2">
                            <VIcon size="24" icon="ri-palette-line" />
                            <div class="text-body-1 font-weight-medium">
                                {{ profileHeaderData.marital_status }}
                            </div>
                        </div>

                        <div class="d-flex align-center gap-x-2">
                            <VIcon size="24" icon="ri-calendar-line" />
                            <div class="text-body-1 font-weight-medium">
                                {{ profileHeaderData.dob }}
                            </div>
                        </div>
                        <div class="d-flex align-center gap-x-2">
                            <VIcon size="24" icon="ri-map-pin-line" />
                            <div class="text-body-1 font-weight-medium">
                                {{ profileHeaderData.city + ',' + profileHeaderData.country }}
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </VCardText>
    </VCard>
</template>

<style lang="scss">
.user-profile-avatar {
    border: 5px solid rgb(var(--v-theme-surface));
    background-color: rgb(var(--v-theme-surface)) !important;
    inset-block-start: -3rem;

    .v-img__img {
        border-radius: 0.375rem;
    }
}
</style>
