import { EdgeProps, useEdge } from '@vue-flow/core';
import { computed, unref } from 'vue';
import { MarkerArrowEnum } from '../enum';

export const useConnectionFocus = (props: EdgeProps) => {
  const { edge } = useEdge(props.id);

  const getSelected = computed(() => unref(edge)?.selected);

  const getMarkerEnd = computed(
    () =>
      `url(#${
        unref(getSelected) ? MarkerArrowEnum.BASIC_ARROW_SELECTED : MarkerArrowEnum.BASIC_ARROW
      })`
  );

  return {
    getMarkerEnd,
    getSelected,
  };
};