<script setup lang="ts">
import { ref } from 'vue'
import type { RenderComponentExposeType, RenderComponentProps } 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'
import { CellAttributeKeyEnum } from '@/enums/cellAttributeEnum'
import { useJsonParse } from '@/hooks/business/useJSONParse'
import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector'

const props = defineProps<RenderComponentProps>()
const nodeUtils = new NodeUtils()

const imgSrc = ref(getDefaultImage() || '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="M31 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v17c0 7.2-5.8 13-13 13z"%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%3Cpath fill="%23E57373" d="m47.7 29.1l-2.8-2.8c-.4-.4-1.1-.4-1.6 0L42 27.6l4.4 4.4l1.3-1.3c.4-.4.4-1.1 0-1.6z"%2F%3E%3Cpath fill="%23FF9800" d="M27.467 42.167L39.77 29.865l4.384 4.384L31.85 46.55z"%2F%3E%3Cpath fill="%23B0BEC5" d="m46.4 32.038l-2.192 2.192l-4.383-4.384l2.192-2.191z"%2F%3E%3Cpath fill="%23FFC107" d="M27.5 42.2L26 48l5.8-1.5z"%2F%3E%3Cpath fill="%2337474F" d="m26.7 45l-.7 3l3-.7z"%2F%3E%3C%2Fsvg%3E')

function getDefaultImage() {
  const cell = nodeUtils.getCellById(props.config.cellInfo!.id)

  if (!cell) return

  const defaultImage = cell.getAttribute(CellAttributeKeyEnum.DEFAULT_IMAGE)

  if (!defaultImage)
    return

  const { imageSource, libPath, path } = useJsonParse(defaultImage).value as ImageSelectorDataType

  return imageSource === VariableImageSourceEnum.GALLERY ? libPath : path
}

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, enable, rangeList, defaultImage } = data as VariableImageActDataType
  if (!enable) return

  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 h-full object-contain" :src="imgSrc">
  </div>
</template>