import React from 'react';
import { Layer } from 'recharts';

interface CustomLinkProps {
  hoveredLinks: string[];
  activeLinks: string[];
  payload: any;
  sourceX: number;
  targetX: number;
  sourceY: number;
  targetY: number;
  sourceControlX: number;
  targetControlX: number;
  linkWidth: number;
  index: number;
  activeLink: any;
  onClick?: (payload: any) => void;
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
  strokeOpacity?: number;
}

const CustomLink: React.FC<CustomLinkProps> = (props) => {
  const [fill, setFill] = React.useState('url(#linkGradient)');
  const {
    hoveredLinks,
    activeLinks,
    payload,
    sourceX,
    targetX,
    sourceY,
    targetY,
    sourceControlX,
    targetControlX,
    linkWidth,
    index,
    activeLink
  } =
    props;
  const isActive = activeLinks?.length > 0 && activeLinks.includes(payload.id);
  const isHover = hoveredLinks?.length > 0 && hoveredLinks.includes(payload.id);

  const onClick = () => {
    if (props.onClick) {
      props.onClick(props.payload);
    }
  };

  return (
      <Layer
          key={`CustomLink${index}`}
          onClick={onClick}
          onMouseEnter={props.onMouseEnter}
          onMouseLeave={props.onMouseLeave}
      >
        <path
            d={`
          M${sourceX},${sourceY + linkWidth / 2}
          C${sourceControlX},${sourceY + linkWidth / 2}
            ${targetControlX},${targetY + linkWidth / 2}
            ${targetX},${targetY + linkWidth / 2}
          L${targetX},${targetY - linkWidth / 2}
          C${targetControlX},${targetY - linkWidth / 2}
            ${sourceControlX},${sourceY - linkWidth / 2}
            ${sourceX},${sourceY - linkWidth / 2}
          Z
        `}
            fill={isActive ? 'rgba(57, 78, 255, 1)' : (isHover ? 'rgba(57, 78, 255, 0.5)' : fill)}
            strokeWidth='1'
            strokeOpacity={props.strokeOpacity}
            onMouseEnter={() => {
              setFill('rgba(57, 78, 255, 0.5)');
            }}
            onMouseLeave={() => {
              setFill('url(#linkGradient)');
            }}
        />
      </Layer>
  );
};

export default CustomLink;