<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;base64,PHN2ZyB0PSIxNjk4OTExMjk1NTcyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc4MjkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNOTI0LjYwNCA2NTIuNzQxYy04LjY1NyAxNC4wNDUtMTkuOTk1IDI4Ljk2OS0zNC43OTkgNDIuNzA4QzkwNy4xMTQgNjgwLjUxNCA5MTUgNjY4LjI4MyA5MTUgNjY4LjI4M1Y4MTRIMTAwVjU4NC4zMDJzMS45MTktMy45NzQgNS4zMTYtMTAuNTZjLTIuOTIzIDQuMDA5LTUuMzE2IDcuMjc2LTYuMzE2IDkuNTY2VjgxOGg4MjZWNjUyLjEyMWMwIDAuMjA3LTAuMjY4IDAuNDEzLTAuMzk2IDAuNjJ6IiBmaWxsPSIjNTNBRkZEIiBwLWlkPSI3ODMwIj48L3BhdGg+PHBhdGggZD0iTTc3NS4zNjggNzQ1Ljc4M2MtOC43NzQgMC45MzctMTcuOTY0IDEuNDQxLTI3LjYwNCAxLjQ0MS0zOS4xNTUgMC03NS4yMTYtNy4xMDktMTA3LjM0My0yMS4xMzQgMjQuNTA0IDEzLjQ4MiA1NC44MDQgMjIuODE0IDkxLjgwNiAyMi44MTQgMTUuNDc3IDAgMjkuODMzLTEuMTM2IDQzLjE0MS0zLjEyMXpNMTMxLjQ2NiA0OTUuNjk4YzI0LjM1OS0yMS40NjcgNTAuNDctMzguNTk5IDc3LjgwNy01MC45MjIgMzQuNDQ0LTE1LjUyNSA3MC42NTMtMjMuMzk3IDEwNy43Mi0yMy4zOTcgNjYuOTA3IDAgMTI3LjQxNyAyNi44MDcgMTc1LjAzNyA3Ny41MjMgMzUuNjA1IDM3LjkxOSA1MS40MjUgNzUuNzIxIDUyLjA4MiA3Ny4zMTJsMC4zMTIgMC43NzIgMC4yMzcgMC44YzAuMDkzIDAuMzAxIDEwLjkxMyAzNC44MTUgNDEuNDQ3IDY4LjU5NiA0MC4zMzcgNDQuNjI1IDk0LjcyNSA2Ny4yNTIgMTYxLjY1NiA2Ny4yNTIgNjYuMjQ0IDAgMTE2LjEzMi0yNi40MTcgMTQ4LjI0My03OC41MTdDOTE4LjQ4NSA1OTguNjQ3IDkyNCA1NjIuMTk0IDkyNSA1NTYuMzczVjE5MEg5OXYzMzguNDExYzktMTAuMjA4IDE5LjY4OC0yMS40NTIgMzIuNDY2LTMyLjcxM3ogbTU4NC44MzctMjA5Ljg2M2M1OC4xMjQgMCAxMDUuMjQzIDQ3LjExOSAxMDUuMjQzIDEwNS4yNDMgMCA1OC4xMjQtNDcuMTE5IDEwNS4yNDMtMTA1LjI0MyAxMDUuMjQzLTU4LjEyNCAwLTEwNS4yNDMtNDcuMTE5LTEwNS4yNDMtMTA1LjI0My0wLjAwMS01OC4xMjQgNDcuMTE4LTEwNS4yNDMgMTA1LjI0My0xMDUuMjQzeiIgZmlsbD0iIzUzQUZGRCIgcC1pZD0iNzgzMSI+PC9wYXRoPjxwYXRoIGQ9Ik05NTkgMTg3LjkxM0M5NTkgMTcwLjI4OCA5NDQuNzEyIDE1NiA5MjcuMDg3IDE1Nkg5Ni45MTNDNzkuMjg4IDE1NiA2NSAxNzAuMjg4IDY1IDE4Ny45MTN2NjMxLjE3NUM2NSA4MzYuNzEyIDc5LjI4OCA4NTEgOTYuOTEzIDg1MWg4MzAuMTc1Qzk0NC43MTIgODUxIDk1OSA4MzYuNzEyIDk1OSA4MTkuMDg3VjE4Ny45MTN6TTk5IDgxOFY1ODMuMzA4YzEtMi4yOSAzLjUyOS01LjU1NyA2LjQ1Mi05LjU2NiA5LjM3LTEyLjg1MiAyNS44MDktMzMuMzEyIDQ4LjkxOC01My41NDEgNDkuNDQ1LTQzLjI4MyAxMDQuMTI2LTY1LjIzIDE2Mi42MjMtNjUuMjMgNTcuODMxIDAgMTA4LjIwMSAyMi4yMzYgMTQ5Ljc2MSA2Ni4wOTEgMjkuNTM0IDMxLjE2NSA0NC4wOTUgNjIuOTM2IDQ2LjA3MyA2Ny40MyAyLjE2NyA2LjY2OCAxNC45NSA0Mi45NTYgNDcuMjg2IDc5LjIxMyAyMC42MTIgMjMuMTExIDQ0Ljk2NiA0MS41MzQgNzIuMzkzIDU0Ljc1OCAyLjYxIDEuMjU5IDUuMjUgMi40NjQgNy45MTUgMy42MjcgMzIuMTI3IDE0LjAyNSA2OC4xODcgMjEuMTM0IDEwNy4zNDIgMjEuMTM0IDkuNjQgMCAxOC44My0wLjUwNCAyNy42MDQtMS40NDEgNTEuMzYzLTUuNDg3IDg4LjIxLTI2LjA1OCAxMTQuMzctNTAuMzM1IDE0LjgwNS0xMy43MzkgMjYuMjA5LTI4LjY2MiAzNC44NjYtNDIuNzA4IDAuMTI4LTAuMjA3IDAuMzk2LTAuNDEzIDAuMzk2LTAuNjJWODE4SDk5eiBtODI2LTYyOHYzNjYuMzczYy0xIDUuODIxLTYuNTE2IDQyLjI3NS0yOC45OTMgNzguNzQzLTMyLjExMSA1Mi4xLTgxLjk5MSA3OC41MTctMTQ4LjIzNCA3OC41MTctNjYuOTMxIDAtMTIxLjMyNS0yMi42MjctMTYxLjY2Mi02Ny4yNTItMzAuNTM0LTMzLjc4MS00MS4zNTgtNjguMjk1LTQxLjQ1MS02OC41OTZsLTAuMjQxLTAuOC0wLjMxOS0wLjc3MmMtMC42NTctMS41OTEtMTYuNDktMzkuMzkyLTUyLjA5NS03Ny4zMTItNDcuNjItNTAuNzE2LTEwOC4xNTUtNzcuNTIzLTE3NS4wNjItNzcuNTIzLTM3LjA2NyAwLTczLjMyNyA3Ljg3Mi0xMDcuNzcxIDIzLjM5Ny0yNy4zMzcgMTIuMzIyLTUzLjM0NiAyOS40NTUtNzcuNzA2IDUwLjkyMkMxMTguNjg4IDUwNi45NTkgMTA4IDUxOC4yMDMgOTkgNTI4LjQxMVYxOTBoODI2eiIgZmlsbD0iIiBwLWlkPSI3ODMyIj48L3BhdGg+PHBhdGggZD0iTTEwMCA4MTRoODE1VjY2OC4yODNzLTcuODk2IDEyLjIzMi0yNS4yMDQgMjcuMTY2Yy0yNi4xNiAyNC4yNzctNjMuMDM2IDQ0Ljg0OC0xMTQuMzk5IDUwLjMzNS0xMy4zMDggMS45ODQtMjcuNjc4IDMuMTIxLTQzLjE1NSAzLjEyMS0zNy4wMDIgMC02Ny4zMDktOS4zMzMtOTEuODE0LTIyLjgxNGEyMzEuNDkyIDIzMS40OTIgMCAwIDEtNy45Mi0zLjYyN2MtMjcuNDI3LTEzLjIyNC01MS43ODYtMzEuNjQ3LTcyLjM5OC01NC43NTgtMzIuMzM2LTM2LjI1Ny00NS4xMjctNzIuNTQ1LTQ3LjI5My03OS4yMTMtMS45NzgtNC40OTQtMTYuNTUzLTM2LjI2NS00Ni4wODctNjcuNDMtNDEuNTYtNDMuODU1LTkxLjk1Ni02Ni4wOTEtMTQ5Ljc4Ny02Ni4wOTEtNTguNDk3IDAtMTEzLjIyOSAyMS45NDctMTYyLjY3NCA2NS4yMy0yMy4xMDkgMjAuMjI5LTM5Ljc4NiA0MC42ODktNDkuMTU2IDUzLjU0MS0zLjM5NyA2LjU4Ni01LjExMiAxMC41Ni01LjExMiAxMC41NlY4MTR6IiBmaWxsPSIjMTA4M0VBIiBwLWlkPSI3ODMzIj48L3BhdGg+PHBhdGggZD0iTTcxNi4zMDMgMzkxLjA3OG0tMTA1LjI0MyAwYTEwNS4yNDMgMTA1LjI0MyAwIDEgMCAyMTAuNDg2IDAgMTA1LjI0MyAxMDUuMjQzIDAgMSAwLTIxMC40ODYgMFoiIGZpbGw9IiNGOUY0NTUiIHAtaWQ9Ijc4MzQiPjwvcGF0aD48L3N2Zz4=')

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>