import { Component, ElementRef, AfterViewInit } from '@angular/core';
import { Leafer, Rect, Box, PointerEvent, DragEvent } from 'leafer-ui';

@Component({
  selector: 'comp-flow-editor',
  templateUrl: './comp-flow-editor.component.html',
  styleUrls: ['./comp-flow-editor.component.scss'],
  standalone: true,
})
export class CompFlowEditorComponent implements AfterViewInit {
  private leafer: Leafer|undefined;
  private nodeBox: Box|undefined;
  
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    this.initLeafer();
    this.createBlueprintNode();
  }

  private initLeafer(): void {
    const container = this.el.nativeElement.querySelector('.editor-container');
    this.leafer = new Leafer({
      view: container,
      width: 800,
      height: 600,
      fill: '#1E1E1E' // UE5 风格的暗色背景
    });
  }

  private createBlueprintNode(): void {
    // 创建节点容器
    this.nodeBox = new Box({
      x: 100,
      y: 100,
      width: 300,
      height: 200,
      fill: '#2A2A2A',
      stroke: '#3D3D3D',
      strokeWidth: 2,
      cornerRadius: 4,
      draggable: true,
      shadow: {
        x:4,
        y:4,
        color: '#00000080',
        blur: 10,
        // offsetY: 4
      }
    });

    // 创建标题栏
    const titleBar = new Rect({
      x: 0,
      y: 0,
      width: 300,
      height: 32,
      fill: '#0078D7', // UE5 蓝色
      cornerRadius: [4, 4, 0, 0]
    });

    // 创建标题文本
    const titleText = new Rect({
      x: 10,
      y: 5,
      width: 280,
      height: 22,
      fill: '#FFFFFF',
      // text: {
      //   text: 'Blueprint Node',
      //   fontSize: 14,
      //   fontFamily: 'Arial',
      //   fontWeight: 'bold'
      // }
    });

    // 创建主体区域
    const body = new Rect({
      x: 0,
      y: 32,
      width: 300,
      height: 168,
      fill: '#252526',
      cornerRadius: [0, 0, 4, 4]
    });

    // 创建输入引脚
    const inputPin = this.createPin(10, 60, 'Input', true);
    
    // 创建输出引脚
    const outputPin = this.createPin(270, 60, 'Output', false);

    // 组装节点
    this.nodeBox.add(titleBar);
    this.nodeBox.add(titleText);
    this.nodeBox.add(body);
    this.nodeBox.add(inputPin);
    this.nodeBox.add(outputPin);

    // 添加到画布
    this.leafer?.add(this.nodeBox);

    // 添加拖拽事件
    this.setupDragEvents();
  }

  private createPin(x: number, y: number, label: string, isInput: boolean): Box {
    const pinBox = new Box({
      x,
      y,
      width: 20,
      height: 20,
      draggable: false
    });

    const pinCircle = new Rect({
      x: isInput ? 0 : 10,
      y: 0,
      width: 10,
      height: 10,
      fill: '#FFA500',
      cornerRadius: 5
    });

    const pinLabel = new Rect({
      x: isInput ? 15 : -60,
      y: 0,
      width: 50,
      height: 20,
      fill: '#FFFFFF',
      // text: {
      //   text: label,
      //   fontSize: 12,
      //   fontFamily: 'Arial',
      //   align: isInput ? 'left' : 'right'
      // }
    });

    pinBox.add(pinCircle);
    pinBox.add(pinLabel);
    return pinBox;
  }

  private setupDragEvents(): void {
    if(this.nodeBox){
      this.nodeBox.on(DragEvent.DRAG, (event) => {
        if(this.nodeBox){
            // 拖拽时更新位置
            this.nodeBox.x = event.x;
            this.nodeBox.y = event.y;
        }
      });
    }
  }
}