<script lang="ts" setup>
import { computed, ref, unref } from 'vue'
import { isNullOrUnDef } from '@wry-smile/utils-is'
import type { RenderComponentExposeType, RenderComponentProps } from '@/core/Library/types'
import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
import { NodeUtils } from '@/hooks/business/useNodeUtils'
import { VariableImageSourceEnum } from '@/enums/datasource'
import { useOnMessage } from '@/core/Library/hook/useOnMessage'
import type { CommandSource } from '@/core/websocket/processor'
import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'
import { useContentDataStoreWithOut } from '@/store/modules/contentData'
const props = defineProps<RenderComponentProps>()

const imgUrl = ref(new URL('/public/webapp/images/thingskit/switch-on.svg', import.meta.url).href)

const isNonstandard = ref(false)

const contentDataStore = useContentDataStoreWithOut()
const getCurrentData = computed(() => contentDataStore.getCurrentNodeDataById(props.config))

const onReceiveDataSourceMessage = (_commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
  const { id: node, actJson, dataSourceJson } = unref(getCurrentData)!
  const { attr } = dataSourceJson
  const { rangeList } = actJson.STATUS_SETTING
  const nodeUtils = new NodeUtils()
  const cell = nodeUtils.getCellById(node)
  if (!cell) return
  const { latestValue } = useLatestMessageValue(message.data, attr!)

  if (isNullOrUnDef(latestValue))
    return

  const flag = rangeList.find(item => item.statusValue?.toString() === latestValue?.toString())

  if (flag) {
    isNonstandard.value = false
    const { imageInfo, type } = flag!
    const { path, imageSource, libPath } = imageInfo || {}
    imgUrl.value = imageSource === VariableImageSourceEnum.GALLERY ? libPath! : path!
    if (!cell) return
    cell.setAttribute('SWITCH_STATUS', type!)
  }
  else {
    isNonstandard.value = true
  }
}

const { onMessage } = useOnMessage({ onReceiveDataSourceMessage })

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

<template>
  <main class="w-full h-full flex flex-col justify-center items-center">
    <div class="w-full">
      <img v-if="!isNonstandard" :src="imgUrl" alt="" class="w-full">
      <div v-else>
        非标准数值
      </div>
    </div>
  </main>
</template>