import { useTheme } from '@mui/material';

import { equals } from 'ramda';

import { margin } from '../../Chart/common';

interface ShowTooltipArgs {
  tooltipData: string;
  tooltipLeft: number;
  tooltipTop: number;
}

interface Props {
  hideTooltip: () => void;
  isHorizontal: boolean;
  label: string;
  showTooltip: (args: ShowTooltipArgs) => void;
  thresholdType: string;
  value: number;
  width: number;
  yScale: (value: number) => number;
}

export const ThresholdLine = ({
  value,
  label,
  yScale,
  thresholdType,
  showTooltip,
  hideTooltip,
  width,
  isHorizontal
}: Props): JSX.Element => {
  const theme = useTheme();

  const scaledValue = yScale(value);

  const onMouseEnter = (): void =>
    showTooltip({
      tooltipData: label,
      tooltipLeft: -(margin.left + margin.right),
      tooltipTop: scaledValue
    });

  const lineColor = equals(thresholdType, 'warning')
    ? theme.palette.warning.main
    : theme.palette.error.main;

  const coordinates = isHorizontal
    ? {
        x1: 0,
        x2: width,
        y1: scaledValue,
        y2: scaledValue + 1
      }
    : {
        x1: scaledValue,
        x2: scaledValue + 1,
        y1: 0,
        y2: width
      };

  return (
    <>
      <line
        data-testid={`${thresholdType}-line-${value}`}
        stroke={lineColor}
        strokeDasharray="5,5"
        strokeWidth={2}
        {...coordinates}
      />
      {
        // biome-ignore lint/a11y/noStaticElementInteractions: need it
        <line
          data-testid={`${thresholdType}-line-${value}-tooltip`}
          onMouseEnter={onMouseEnter}
          onMouseLeave={hideTooltip}
          stroke="transparent"
          strokeWidth={5}
          {...coordinates}
        />
      }
    </>
  );
};