<template>
  <!--
    ChatRoot
    --------
    Root-component voor de chatclient. Deze component zorgt ervoor dat er
    altijd precies één SafeViewport-wrapper is rond de gekozen Shell
    (DesktopChatShell, MobileChatShell, ...).

    De daadwerkelijke shell-component en zijn props worden vanuit
    chat-client.js doorgegeven via de props shellComponent en shellProps.
  -->
  <SafeViewport>
    <component :is="shellComponent" v-bind="shellProps" />
  </SafeViewport>
</template>

<script setup>
import { computed } from 'vue';
import SafeViewport from './SafeViewport.vue';
import DesktopChatShell from './DesktopChatShell.vue';
import MobileChatShell from './MobileChatShell.vue';

const props = defineProps({
  shellComponent: {
    type: [Object, Function, String],
    default: null
  },
  shellProps: {
    type: Object,
    default: () => ({})
  }
});

// Fallbacks voor het geval chat-client.js geen shellComponent meegeeft.
const resolvedShellComponent = computed(() => {
  if (props.shellComponent) {
    return props.shellComponent;
  }

  // Eenvoudige fallback: gebruik DesktopShell op brede schermen,
  // MobileShell op smalle schermen.
  if (typeof window !== 'undefined' && window.innerWidth <= 768) {
    return MobileChatShell;
  }
  return DesktopChatShell;
});

const shellComponent = resolvedShellComponent;
const shellProps = props.shellProps;
</script>
