<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore()
const isDesktop = ref(true)
const categories = ref([]);
const isMobile = ref(window.innerWidth <= 768);
const answers = ref([]);
onBeforeMount(async () => {
    store.dispatch('updateCurrentPage', '/provider/telehealth')
    console.log('current pt', store.getters.getCurrentCallPatient)
    await store.dispatch('getAgentCategory')
    categories.value = store.getters.getCategories.data;
    console.log("categories", categories.value);
});
const updateCategory = async (id, name) => {
    // answers.value.push({ category_id:id})
    await store.dispatch('setSelectCategoryId', true);
    localStorage.setItem('category_id', id)
    localStorage.setItem('category_name', name)
    store.dispatch('updateIsLoading', false)
}
onMounted(async () => {
    window.addEventListener('resize', checkIfMobile);
})
onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);
});

const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};
</script>
<template>
    <div class="auth-wrapper d-flex align-center justify-center">
        <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>
        <div class="auth-card pt-0 rounded-5" max-width="350">

            <VRow>
                <VCol cols="12" class="p-0">

                    <div v-for="category in categories" @click="updateCategory(category.id, category.name)"
                        :key="category">
                        <RouterLink :to="'/provider/questionere/' + category.category_link"
                            v-if="category.name != 'Family history'">
                            <VCard :width="isMobile ? '360' : '500'" class="mb-2">
                                <VRow class="justify-space-between pb-2 px-4 pt-4">
                                    <Vcol col="auto" style="padding:11px 15px;">
                                        <div class="d-flex flex-wrap gap-0 pb-2">
                                            <img :src="'/assets/images/asthma/' + category.icon"
                                                class=" mx-3 ml-0 category-icon" width="24" height="24">
                                            <!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="mx-3 ml-0 icon icon-tabler icons-tabler-outline icon-tabler-users-group category-icon">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
                                                <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                <path d="M17 10h2a2 2 0 0 1 2 2v1" />
                                                <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
                                            </svg> -->
                                            <h4>{{ category.name }}</h4>
                                        </div>
                                    </Vcol>
                                    <Vcol col="auto">
                                        <div class="flex-wrap gap-0 pt-3 pb-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M9 6l6 6l-6 6" />
                                            </svg>
                                        </div>

                                    </Vcol>
                                </VRow>
                                <div class="d-flex align-items-center">

                                    <VProgressLinear model-value="100" height="2" color="success" :rounded="true" />
                                </div>
                            </VCard>
                        </RouterLink>
                    </div>
                </VCol>
            </VRow>
        </div>
    </div>
</template>
<style lang="scss">
@media (min-width: 992px) {
    .category-cards {
        max-width: 500px !important;
    }
}

@media (max-width: 991px) {
    .category-cards {
        max-width: 300px !important;
    }
}

.category-icon {
    color: rgb(105, 108, 255);
}
</style>
