<template>
    <Box v-if="deviceType === 'desktop'" padding="closed" class="view">
        <IconAction @click="returnDefault()" v-if="!actualComponent.unclosable" icon="fa-solid fa-xmark" class="close"/>
        <component :is="actualComponent.component" v-bind="actualComponent.props"/>
    </Box>
    <div v-else-if="deviceType === 'mobile' && !actualComponent.default" class="view-mobile">
        <IconAction @click="returnDefault()" v-if="!actualComponent.unclosable" icon="fa-solid fa-xmark" class="close"/>
        <component :is="actualComponent.component" v-bind="actualComponent.props"/>
    </div>
</template>
<script setup>
import Box from '../UI/Box.vue';
import Events from '@/utils/Events';
import { computed, ref, watch } from 'vue';
import Loading from '@/components/Widget/View/LoadingView.vue'
import SearchResults from '@/components/Widget/View/SearchResults.vue';
import Default from '../Widget/View/Default.vue';
import IconAction from '../UI/IconAction.vue';

//TODO: Render compatibility with mobile
//TODO: Make Default.vue a real default view
//TODO: Make the search request
//TODO: Make the medias

const deviceType = ref((window.innerWidth < 768 || window.innerHeight < 607) ? 'mobile' : 'desktop');

watch(() => window.innerWidth, () => {
    deviceType.value = (window.innerWidth < 768 || window.innerHeight < 607) ? 'mobile' : 'desktop';
});

const defaultComponent = {
    component: Default,
    unclosable: true,
    default: true,
    props: {}
};  

function returnDefault() {
    actualComponent.value = defaultComponent;
}

const actualComponent = ref(defaultComponent);

Events.on("SEARCH_STARTED", () => {
    setLoading("Recherche en cours ...")
})
Events.on("SEARCH_RESULT", (data) => {
    console.log("Search results received:", data);
    actualComponent.value = {
        component: SearchResults,
        props: {
            results: data
        }
    };
});

    function setLoading(messageLoading) {
        
    actualComponent.value = {
        component: Loading,
        unclosable: true,
        props: {
            message: messageLoading
        }
    };

}

</script>
<style scoped>

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--text-secondary);
    cursor: pointer;
}

.view {
    position: relative;
}

.view-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-secondary);
    z-index: 1000;
    border-radius: 0 !important;
}   

</style>