<template>
    <aside @click="closeBackdrop($event)" id="profile" class="frontend-drawer" v-if="logged">
        <div class="max-w-md w-full p-4 frontend-drawer-content">
            <button type="button"
                class="absolute ltr:right-4 rtl:left-4 flex justify-center items-center w-6 h-6 cursor-pointer"
                @click="frontendDrawerHide('profile')">
                <i class="lab lab-close-circle-line text-negative"></i>
            </button>
            <div class="flex items-center gap-3 mb-5">
                <figure
                    class="overflow-hidden relative z-10 w-[74px] h-[74px] border-2 border-dashed rounded-full inline-flex items-center justify-center border-white bg-gradient-to-t from-[#FFD361] to-[#FF006B]
            before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-24 before:h-24 before:rounded-full before:-z-10 before:bg-white">
                    <img class="w-[68px] h-[68px] rounded-full" :src="profile.image" alt="avatar">
                    <label for="avatar"
                        class="block w-full h-11 absolute top-1/2 bottom-0 z-10 cursor-pointer bg-white/70">
                        <input type="file" id="avatar" @change="saveImage" ref="imageProperty"
                            accept="image/png, image/jpeg, image/jpg"
                            class="w-full h-full rounded-full opacity-0 cursor-pointer">
                        <svg class="absolute left-1/2 -translate-x-1/2 bottom-4" xmlns="http://www.w3.org/2000/svg"
                            width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path
                                d="M20.97 1H18.03C16.76 1 16 1.76 16 3.03V5.97C16 7.24 16.76 8 18.03 8H20.97C22.24 8 23 7.24 23 5.97V3.03C23 1.76 22.24 1 20.97 1ZM21.19 4.31C21.07 4.43 20.91 4.49 20.75 4.49C20.59 4.49 20.43 4.43 20.31 4.31L20.13 4.13V6.37C20.13 6.72 19.85 7 19.5 7C19.15 7 18.87 6.72 18.87 6.37V4.13L18.69 4.31C18.45 4.55 18.05 4.55 17.81 4.31C17.57 4.07 17.57 3.67 17.81 3.43L19.06 2.18C19.11 2.13 19.18 2.09 19.25 2.06C19.27 2.05 19.29 2.05 19.31 2.04C19.36 2.02 19.41 2.01 19.47 2.01C19.49 2.01 19.51 2.01 19.53 2.01C19.6 2.01 19.66 2.02 19.73 2.05C19.74 2.05 19.74 2.05 19.75 2.05C19.82 2.08 19.88 2.12 19.93 2.17C19.94 2.18 19.94 2.18 19.95 2.18L21.2 3.43C21.44 3.67 21.44 4.07 21.19 4.31Z"
                                fill="#1F1F39" />
                            <path
                                d="M9.00012 10.3801C10.3146 10.3801 11.3801 9.31456 11.3801 8.00012C11.3801 6.68568 10.3146 5.62012 9.00012 5.62012C7.68568 5.62012 6.62012 6.68568 6.62012 8.00012C6.62012 9.31456 7.68568 10.3801 9.00012 10.3801Z"
                                fill="#1F1F39" />
                            <path
                                d="M20.97 8H20.5V12.61L20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16V3.03C16 2.63 16.07 2.29 16.23 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V7.77C21.71 7.93 21.37 8 20.97 8Z"
                                fill="#1F1F39" />
                        </svg>
                    </label>
                </figure>
                <div>
                    <h3 class="font-medium text-sm leading-6 capitalize mb-0.5">{{ profile.name }}</h3>
                    <p class="text-xs mb-0.5 text-black/80">{{ profile.email }}</p>
                    <p class="font-medium text-sm leading-6">{{ profile.currency_balance }}</p>
                </div>
            </div>
            <nav>
                <router-link :to="{ name: 'admin.dashboard' }" v-on:click="linkClick"
                    v-if="profile.role_id !== enums.roleEnum.CUSTOMER && Object.keys(authDefaultPermission).length > 0"
                    class="py-3 last:pb-0 flex items-center gap-3 border-b last:border-none border-[#EFF0F6] cursor-pointer group hover:text-primary transition">
                    <i class="lab lab-dashboard text-base text-black/80 group-hover:text-primary"></i>
                    <span class="text-sm font-normal leading-6">{{ $t('menu.dashboard') }}</span>
                </router-link>
                <router-link :to="{ name: 'frontend.myOrder' }" v-on:click="linkClick"
                    class="paper-link transition w-full flex items-center gap-3.5 py-3 border-b last:border-none border-[#EFF0F6]">
                    <i class="lab lab-reserve-line lab-font-size-17"></i>
                    <span class="text-sm leading-6 capitalize">{{ $t('button.my_orders') }}</span>
                </router-link>

                <router-link :to="{ name: 'frontend.editProfile' }" v-on:click="linkClick"
                    class="paper-link transition w-full flex items-center gap-3.5 py-3 border-b last:border-none border-[#EFF0F6]">
                    <i class="lab lab-edit lab-font-size-17"></i>
                    <span class="text-sm leading-6 capitalize">{{ $t('button.edit_profile') }}</span>
                </router-link>

                <router-link :to="{ name: 'frontend.chat' }" v-on:click="linkClick"
                    class="paper-link transition w-full flex items-center gap-3.5 py-3 border-b last:border-none border-[#EFF0F6]">
                    <i class="lab lab-messages-line lab-font-size-17"></i>
                    <span class="text-sm leading-6 capitalize">{{ $t('button.chat') }}</span>
                </router-link>
                <router-link :to="{ name: 'frontend.changePassword' }" v-on:click="linkClick"
                    class="paper-link transition w-full flex items-center gap-3.5 py-3 border-b last:border-none border-[#EFF0F6]">
                    <i class="lab lab-key lab-font-size-17"></i>
                    <span class="text-sm leading-6 capitalize">{{ $t('button.change_password') }}</span>
                </router-link>
                <button @click="showLanguageModal()" data-modal="#language" type="button"
                    class="paper-link transition w-full flex items-center gap-3.5 py-3 border-b last:border-none border-[#EFF0F6]">
                    <i class="lab lab-languages lab-font-size-17"></i>
                    <span class="text-sm leading-6 capitalize">{{ $t('button.change_language') }}</span>
                </button>
                <button @click="logout()"
                    class="py-3 last:pb-0 flex items-center gap-3 border-b last:border-none border-[#EFF0F6] cursor-pointer group hover:text-primary transition">
                    <i class="lab lab-logout text-base text-black/80 group-hover:text-primary"></i>
                    <span class="text-sm font-normal leading-6">{{ $t('button.logout') }}</span>
                </button>
            </nav>
        </div>
    </aside>
</template>

<script>

import alertService from "../../../services/alertService";
import LoadingComponent from "../../frontend/components/LoadingComponent.vue";
import appService from "../../../services/appService";
import roleEnum from "../../../enums/modules/roleEnum";
import { useAuthStore } from "../../../stores/auth";
import { useFrontendEditProfileStore } from "../../../stores/frontend/frontendEditProfile";
export default {
    name: "FrontendMobileAccountComponent",
    components: { LoadingComponent },
    data() {
        return {
            loading: {
                isActive: false,
            },
            enums: {
                roleEnum: roleEnum
            },
            authStore: useAuthStore(),
            frontendEditProfileStore: useFrontendEditProfileStore(),
        }
    },
    computed: {
        logged: function () {
            return this.authStore.authStatus;
        },
        profile: function () {
            return this.authStore.authInfo;
        },
        authDefaultPermission: function () {
            return this.authStore.authDefaultPermission;
        },
    },
    methods: {
        textShortener: function (text, number = 30) {
            return appService.textShortener(text, number);
        },
        linkClick: function () {
            const profile = document.getElementById('profile');
            document.body.style.overflowY = "auto";
            profile?.classList?.remove('active');
        },
        closeBackdrop: function (e) {
            document.body.style.overflowY = "auto";
            return appService.closeBackdrop(e);
        },
        modalHide: function () {
            appService.modalHide('#profile');
        },
        showLanguageModal: function () {
            this.modalHide();
            appService.modalShow('#language');
        },
        frontendDrawerHide: function (id) {
            appService.frontendDrawerHide(id);
            document.body.style.overflowY = "auto";
        },
        showLanguageModal: function () {
            this.modalHide();
            appService.modalShow('#language');
        },
        logout: function () {
            this.authStore.logout().then(res => {
                this.modalHide();
                this.$router.push({ name: "frontend.home" });
            }).catch();
        },
        saveImage: function () {
            if (this.$refs.imageProperty.files[0]) {
                try {
                    this.loading.isActive = true;
                    const formData = new FormData();
                    formData.append("image", this.$refs.imageProperty.files[0]);
                    this.frontendEditProfileStore.changeImage({ form: formData }).then((res) => {
                        this.authStore.updateAuthInfo(res.data.data).then(res => {
                            this.loading.isActive = false;
                            alertService.success(this.$t("message.photo_update"));
                            this.$refs.imageProperty.value = null;
                        }).catch((err) => {
                            this.loading.isActive = false;
                            alertService.error(err);
                        });
                    }).catch((err) => {
                        this.loading.isActive = false;
                        err.response.data.errors.image.map((error) => {
                            alertService.error(error);
                        });
                    });
                } catch (err) {
                    this.loading.isActive = false;
                    alertService.error(err.response.data.message);
                }
            }
        },
    }
}
</script>
