<script setup lang="ts">
import { ref } from 'vue'
import type { RenderComponentExposeType } from '@/core/Library/types'
import type { CommandSource } from '@/core/websocket/processor'
import { NodeUtils } from '@/hooks/business/useNodeUtils'
import { getMeetTheConditionsRange } from '@/core/Library/utils'
import { ActTypeEnum, VariableImageSourceEnum } from '@/enums/datasource'
import type { VariableImageActDataType } from '@/api/node/model'
import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
import { useOnMessage } from '@/core/Library/hook/useOnMessage'
import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'

const imgSrc = ref('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M13.18 19c.17.72.46 1.39.85 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v6.18c-.5-.11-1-.18-1.5-.18c-.17 0-.33 0-.5.03V5H5v14h8.18m-1.97-3.17l-1.96-2.36L6.5 17h6.53c.11-1.46.7-2.78 1.61-3.81l-.68-.9l-2.75 3.54M19 13.5V12l-2.25 2.25L19 16.5V15a2.5 2.5 0 0 1 2.5 2.5c0 .4-.09.78-.26 1.12l1.09 1.09c.42-.63.67-1.39.67-2.21c0-2.21-1.79-4-4-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5c0-.4.09-.78.26-1.12l-1.09-1.09c-.42.63-.67 1.39-.67 2.21c0 2.21 1.79 4 4 4V23l2.25-2.25L19 18.5V20Z"%2F%3E%3C%2Fsvg%3E')

const onReceiveActMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
  const { node, data, type } = commandSource

  if (type !== ActTypeEnum.VARIABLE_IMAGE) return

  const nodeUtils = new NodeUtils()
  const cell = nodeUtils.getCellById(node)
  if (!cell) return
  const { attr, rangeList, defaultImage } = data as VariableImageActDataType
  const { latestValue } = useLatestMessageValue(message.data, attr)
  const { flag, record } = getMeetTheConditionsRange(rangeList, latestValue)
  let imageSrc
  if (flag) {
    const { imageInfo } = record!
    const { imageSource, path, libPath } = imageInfo!
    imageSrc = imageSource === VariableImageSourceEnum.GALLERY ? libPath : path
  }
  else {
    const { imageSource, path, libPath } = defaultImage
    imageSrc = imageSource === VariableImageSourceEnum.GALLERY ? libPath : path
  }

  imageSrc && (imgSrc.value = imageSrc)
}

const { onMessage } = useOnMessage({
  onReceiveActMessage,
})

defineExpose<RenderComponentExposeType>({
  onMessage,
})
</script>

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