<template>
    <div class="user-profile-card">
        <img :src="profilePhoto" />
        <h2>{{ firstName }} {{ lastName }}</h2>
        <ul>
            <li v-for="(value, key) in data" :key="key">
                <label>{{ $t(key) }}</label>
                <span>{{ value }}</span>
            </li>
        </ul>
        <template v-if="device == 'desktop'">
            <router-link to="/panel/edit">
                <Button v-bind="btns.edit.props" />
            </router-link>
            <Button v-bind="btns.security.props" @click="handleClick" />
        </template>
    </div>
</template>

<script setup>
import init from '../../initialize/userProfileCard.js'
const { btns, items } = init()
const { device, dialog } = inject('service')
const profile = inject('data')
const { profilePhoto = '/images/empty-profile.svg', firstName, lastName } = profile
const data = reactive({});

const temp = {
    true: 'تایید شده', false: 'تایید نشده', 'WHOLESALER': 'عمده فروش', 'BUYER': 'خریدار', 'RETAILER': 'خرده فروش'
}

items.forEach(key => {
    const value = profile[key];
    data[key] = temp[value] || value
});

const handleClick = () =>
    dialog.show(resolveComponent('PanelDialogPasswordChange'))
</script>

<style lang="scss">
.user-profile-card {
    @apply bg-[#FAFAFA] rounded-[0.6rem] border-[#E5E5E5];
    @apply flex flex-col gap-3 p-6 relative overflow-hidden;
    @apply w-[21.4rem] h-[20.1rem] lg:w-[20.8rem] lg:h-[34.9rem] lg:border-2;

    &::before {
        @apply content-['_'] top-0 inset-x-0 h-[4.4rem] lg:h-[6.3rem] bg-primary-600 absolute;
    }

    img {
        @apply w-20 h-20 lg:w-[7.5rem] lg:h-[7.5rem] rounded-full border-2 border-[#FAFAFA] z-0 self-center mt-4;
    }

    h2 {
        @apply text-[#333333] text-sm lg:text-xl font-bold font-vazir self-center;
    }

    ul {
        @apply flex flex-col gap-4 my-auto;

        li {
            @apply flex justify-between items-center pb-4 border-b border-dotted;
            @apply text-xs lg:text-base font-medium font-vazir border-[#E5E5E5] last:border-0;

            label {
                @apply text-[#999999];
            }

            span {
                @apply text-[#333333];
            }
        }
    }

    a {
        @apply w-full flex;
    }

    button {
        @apply w-full h-[2.8rem] lg:h-12 justify-center #{!important};

        span:not(.isax) {
            @apply grow-0 text-[0.7em] lg:text-sm font-medium font-iran-sans;
        }

        .isax {
            @apply text-xl;
        }
    }
}
</style>
