/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-15 17:28:05
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-18 17:46:25
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\LogicFlowNodes\viewNode.ts
 * @Description: viewNode节点构建
 */
import {
  HtmlNode,
  HtmlNodeModel,
  type IHtmlNodeProps,
  type Model,
  BaseNodeModel
} from '@logicflow/core'
import OperationNode from './src/viewNode.vue'
import { createApp, h, ref } from 'vue'
import { NODE_WIDTH, NODE_HEIGHT } from '@/config/designComm'
import { generateId } from '@/utils/plugins/random'

class OperationNodeView extends HtmlNode {
  root: HTMLDivElement
  vueComponent: typeof OperationNode
  vm: ReturnType<typeof createApp> | null = null
  vmProps: ReturnType<
    typeof ref<{
      properties: object
      isSelected: boolean
      isHovered: boolean
      model: BaseNodeModel
    }>
  > | null = null

  constructor(props: IHtmlNodeProps) {
    super(props)
    this.root = document.createElement('div')
    this.root.style.width = '100%'
    this.root.style.height = '100%'
    this.vueComponent = OperationNode
  }

  shouldUpdate() {
    const data = {
      id: this.props.model.properties.id,
      isSelected: this.props.model.isSelected,
      isHovered: this.props.model.isHovered
    }
    if (this.preProperties && this.preProperties === JSON.stringify(data)) {
      return false
    }
    this.preProperties = JSON.stringify(data)
    return true
  }

  setHtml(rootEl: SVGForeignObjectElement): void {
    rootEl.appendChild(this.root)
    if (this.vm && this.vmProps) {
      this.vmProps.value = {
        properties: this.props.model.properties,
        isSelected: this.props.model.isSelected,
        isHovered: this.props.model.isHovered,
        model: this.props.model,
        nodeInfo: { id: generateId(), type: this.props.model.type }
      }
    } else {
      // @ts-expect-error 暂时不解决
      this.vmProps = ref({
        properties: this.props.model.properties,
        isSelected: this.props.model.isSelected,
        isHovered: this.props.model.isHovered,
        model: this.props.model,
        nodeInfo: { id: generateId(), type: this.props.model.type }
      })
      this.vm = createApp({
        render: () => h(this.vueComponent, this.vmProps!.value)
      })
      this.vm.mount(this.root)
    }
  }
}

// class OutputImageNodeView extends OperationNodeView {

// }

class OperationNodeModel extends HtmlNodeModel {
  createId() {
    return generateId() // 生成唯一id
  }
  setAttributes() {
    this.width = NODE_WIDTH
    this.height = NODE_HEIGHT
  }

  getDefaultAnchor(): Model.AnchorConfig[] {
    const { width, height, x, y, id } = this
    return [
      {
        x: x - width / 2,
        y,
        name: 'left',
        id: `${id}_0`
      },
      {
        x: x + width / 2,
        y,
        name: 'right',
        id: `${id}_1`
      },
      {
        x: x,
        y: y + height / 2,
        name: 'bootom',
        id: `${id}_2`
      },
      {
        x: x,
        y: y - height / 2,
        name: 'top',
        id: `${id}_3`
      }
    ]
  }
}

export default [
  { type: 'multi-image-node', model: OperationNodeModel, view: OperationNodeView },
  { type: 'output-image-node', model: OperationNodeModel, view: OperationNodeView },
  { type: 'cash-image-node', model: OperationNodeModel, view: OperationNodeView }
]
