<script setup lang="ts">
import { ref } from 'vue'
import type { RenderComponentExposeType } from '@/core/Library/types'
import { useOnMessage } from '@/core/Library/hook/useOnMessage'
import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
import type { CommandSource } from '@/core/websocket/processor'
import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'
import type { NodeDataDataSourceJsonType } from '@/api/node/model'

const imageSrc = ref('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath fill="%238CBCD6" d="M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z"%2F%3E%3Ccircle cx="35" cy="16" r="3" fill="%23B3DDF5"%2F%3E%3Cpath fill="%239AC9E3" d="M20 16L9 32h22z"%2F%3E%3Cpath fill="%23B3DDF5" d="m31 22l-8 10h16z"%2F%3E%3Ccircle cx="38" cy="38" r="10" fill="%2343A047"%2F%3E%3Cg fill="%23fff"%3E%3Cpath d="M36 32h4v12h-4z"%2F%3E%3Cpath d="M32 36h12v4H32z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')

const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
  const { data } = commandSource
  const { attr } = data as NodeDataDataSourceJsonType
  const { latestValue } = useLatestMessageValue(message.data, attr)
  imageSrc.value = latestValue
}

const { onMessage } = useOnMessage({
  onReceiveDataSourceMessage,
})
defineExpose<RenderComponentExposeType>({ onMessage })
</script>

<template>
  <div class="w-full h-full flex justify-center items-center">
    <img class="w-full" :src="imageSrc">
  </div>
</template>