<script lang="ts">
  import {EdgeLabel, type EdgeProps, getBezierPath} from '@xyflow/svelte';
  import FlowLinePath from './FlowLinePath.svelte';
  import {getOptions} from '../utils/NodeUtils';

  let {
        sourceX,
        sourceY,
        targetX,
        targetY,
        sourcePosition,
        targetPosition,
        markerStart,
        markerEnd,
        interactionWidth = 20,
        label,
        labelStyle
    }: EdgeProps = $props();

    const options = getOptions();
    const resolvedMarkerStart = $derived(options.hideEdgeMarkers === true ? undefined : markerStart);
    const resolvedMarkerEnd = $derived(options.hideEdgeMarkers === true ? undefined : markerEnd);
    const resolvedInteractionWidth = $derived(
        typeof options.edgeInteractionWidth === 'number'
            ? options.edgeInteractionWidth
            : interactionWidth
    );
    const edgeAnimated = $derived(options.edgeAnimated === false ? false : true);
    const bezierPathResult = $derived.by(() =>
        getBezierPath({
            sourceX,
            sourceY,
            sourcePosition,
            targetX,
            targetY,
            targetPosition
        })
    );

    const path = $derived(bezierPathResult[0]);
    const labelX = $derived(bezierPathResult[1]);
    const labelY = $derived(bezierPathResult[2]);
</script>

<FlowLinePath path={path} markerStart={resolvedMarkerStart} markerEnd={resolvedMarkerEnd} animated={edgeAnimated} />

{#if resolvedInteractionWidth > 0}
    <path
        d={path}
        stroke-opacity={0}
        stroke-width={resolvedInteractionWidth}
        fill="none"
        class="svelte-flow__edge-interaction"
    ></path>
{/if}

{#if label}
    <EdgeLabel x={labelX} y={labelY} style={labelStyle} selectEdgeOnClick>
        {label}
    </EdgeLabel>
{/if}
