<template>
	<component :message="message" :is-self-msg="isSelfMsg" :disabled="disabled" :is="getRenderComp"></component>
</template>

<script lang="ts" setup>
	import RtcMessageRenderer from './RtcMessageRenderer.vue'
	import CatchMsgRenderer from './CatchMsgRenderer.vue'
	import { ExedMessageItem } from './data'
	import { CustomMessageType, CustomType } from '@/constants/enum'

	type CustomMessageSwitcherProps = {
		message : ExedMessageItem
		disabled : boolean
		isSelfMsg : boolean
	}
	const props = defineProps<CustomMessageSwitcherProps>()

	const customData = ref(JSON.parse(props.message.customElem.data))
	console.log('3. props.message', props.message)
	const getRenderComp = computed(() => {
		// return [ 
		// 	CustomType.CallingInvite,
		// 	CustomType.CallingAccept,
		// 	CustomType.CallingReject,
		// 	CustomType.CallingCancel,
		// 	CustomType.CallingHungup
		// ].includes(customData.customType) ? '' : CatchMsgRenderer
		switch (customData.value.customType) {
			case CustomMessageType.Call:
				return RtcMessageRenderer
			default:
				return CatchMsgRenderer
		}
	})
</script>