<script setup>
import { StepEdge, EdgeLabelRenderer, useVueFlow, getSmoothStepPath } from '@vue-flow/core'
import { CircleCloseFilled } from '@element-plus/icons-vue'

const props = defineProps({
  id: { type: String, required: true },
  sourceX: { type: Number, required: true },
  sourceY: { type: Number, required: true },
  targetX: { type: Number, required: true },
  targetY: { type: Number, required: true },
  sourcePosition: { type: String, required: true },
  targetPosition: { type: String, required: true },
  data: { type: Object, required: false },
  markerEnd: { type: String, required: false },
  style: { type: Object, required: false },
  label: { required: false },
  selected: { type: Boolean, required: false }
})

const { removeEdges, nodesDraggable } = useVueFlow()

const path = computed(() => getSmoothStepPath(props))

const labelColor = computed(() => props.style?.stroke)
</script>

<script>
export default {
  inheritAttrs: false
}
</script>

<template>
  <StepEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" :interactionWidth="30"></StepEdge>
  <EdgeLabelRenderer>
    <div class="edge-label" :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)` }">
      <span v-if="label" :style="{ color: labelColor }">{{ label }}</span>
      <el-icon @click="removeEdges([id])" v-if="selected && nodesDraggable"><CircleCloseFilled /></el-icon>
    </div>
  </EdgeLabelRenderer>
</template>

<style lang="scss">
.edge-label {
  display: flex;
  align-items: center;
  pointer-events: all;
  position: absolute;
  background-color: #fff;
  span {
    font-size: 14px;
    margin-right: 5px;
  }
  .el-icon {
    display: block;
    font-size: 20px;
    color: var(--main-color);
    cursor: pointer;
  }
}
</style>
