<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 () => {
    await store.dispatch('getCategory')
    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="'/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">
                                            <h4>{{ category.name }}</h4>
                                        </div>
                                    </Vcol>
                                    <Vcol col="auto">

                                        <div class="d-flex align-center gap-0 pt-3 pb-2">
                                            <div class="" v-if="category.question_count > 0">
                                                <v-icon color="rgb(var(--v-theme-yellow))" size="20"
                                                    style="margin-top: -9px;">mdi-check-circle</v-icon>
                                                <!-- <VImg :src="Success" class="success-image" style="top: -2px;"></VImg> -->
                                            </div>
                                            <div class="">
                                                <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>
                                        </div>

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

                                    <VProgressLinear model-value="100" height="2" color="rgb(var(--v-theme-yellow))"
                                        :rounded="true" />
                                </div>
                            </VCard>
                        </RouterLink>
                    </div>
                </VCol>
            </VRow>
        </div>
    </div>
</template>
<style lang="scss">
.success-image {
    display: block;
    position: relative;
    height: 30px;
    width: 30px;
    margin: 0 auto;
    // top: -1px/;

}

@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>
