import React from 'react';
import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, type EdgeProps } from '@xyflow/react';
import styled from 'styled-components';

export type CatalogEntityRelationsEdgeProps = EdgeProps & { className?: string };

export function CatalogEntityRelationsEdge(
  props: CatalogEntityRelationsEdgeProps,
): React.ReactElement {
  const {
    id,
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    style,
    label,
    markerEnd,
    className,
  } = props;

  const [edgePath, labelX, labelY] = getSmoothStepPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    borderRadius: 12,
  });

  return (
    <>
      <BaseEdge id={id} path={edgePath} style={style} markerEnd={markerEnd} />
      {label ? (
        <EdgeLabelRenderer>
          <EdgeLabel
            className={className ? `nopan ${className}` : 'nopan'}
            style={{ transform: `translate(-50%, 0%) translate(${labelX}px, ${labelY - 10}px)` }}
            data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge"
          >
            {label}
          </EdgeLabel>
        </EdgeLabelRenderer>
      ) : null}
    </>
  );
}

const EdgeLabel = styled.div`
  position: absolute;
  background: var(--catalog-entity-relations-edge-label-bg-color);
  color: var(--catalog-entity-relations-edge-label-text-color);
  border: var(--catalog-entity-relations-edge-label-border-width)
    var(--catalog-entity-relations-edge-label-border-style)
    var(--catalog-entity-relations-edge-label-border-color);
  border-radius: var(--catalog-entity-relations-edge-label-border-radius);
  padding: var(--catalog-entity-relations-edge-label-padding);
  font-size: var(--catalog-entity-relations-edge-label-font-size);
  line-height: var(--catalog-entity-relations-edge-label-line-height);
`;