<!-- TODO i18n -->
<template>
    <aside :class="{ sidebar: true, hidden: !show }" id="sidebar"
        :style="{ right: show ? '0px' : '-170px', top: offset + 'px' }">
        <div class="side_content">
            <div class="side_list">
                <header class="hd">
                    <img src="/img/title_pic.png" :alt="$t('common.contact.online')">
                </header>
                <div class="cont">
                    <li>
                        <a class="email" :href="`mailto:${contactUsData.contact_us_mail}`">
                            <i class="fa">
                                <Evalope />
                            </i>
                            {{ $t('common.contact.email') }}
                        </a>
                    </li>
                    <li>
                        <a class="whatsapp" target="_blank" :href="`tel:${contactUsData.contact_us_phone}`">
                            <i class="fa">
                                <Phone />
                            </i>
                            {{ $t('common.contact.tel') }}
                        </a>
                    </li>
                    <li>
                        <a target="_blank" class="skype"
                            :href="`https://wa.me/${contactUsData.contact_us_mobile_phone}`">
                            <i class="fa">
                                <WhatsApp />
                            </i>
                            {{ $t('common.contact.whatsapp') }}
                        </a>
                    </li>
                </div>
                <div class="side_title">
                    <a @click.prevent="slideOut" class="close_btn"><span>x</span></a>
                </div>
            </div>
        </div>
    </aside>
</template>

<script setup>
import Evalope from '~icons/fa/envelope'
import Phone from '~icons/fa/phone'
import WhatsApp from '~icons/fa/whatsapp'
const { t, locale } = useI18n()

const show = ref(true);
const scrollY = ref(0);
const defaultY = 150;

const delayAnimation = debounce(() => {
    scrollY.value = window.scrollY
}, 100)

const offset = computed(() => {
    return scrollY.value + defaultY;
})

const removeEventListener = () => {
    window.removeEventListener('scroll', delayAnimation)
}

onMounted(() => {
    window.addEventListener('scroll', delayAnimation)
})

onUnmounted(() => {
    removeEventListener()
})

const slideOut = () => {
    removeEventListener()
    show.value = false;
}

let contactUsData = ref({})
useFetch('/api/contactUs/getContactUs', { params: { locale: locale.value } }).then(res => {
    contactUsData.value = JSON.parse(res.data.value).data
})

</script>

<style scoped src="~/assets/css/Popup/sidebar.scss" lang="scss"></style>