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

import { equals } from 'ramda';
import { useMemo } from 'react';

import { margins } from '../common/margins';
import { SingleBarProps } from './models';
import { groupMargin } from './Thresholds';

export const barHeights = {
  medium: 72,
  small: 22
};
export const margin = 40;

export const lineMargins = {
  medium: 10,
  small: 5
};

interface ShowTooltipArgs {
  tooltipData: string;
}

interface Props extends Pick<SingleBarProps, 'direction'> {
  barHeight: number;
  hideTooltip: () => void;
  isSmall: boolean;
  label: string;
  showTooltip: (args: ShowTooltipArgs) => void;
  size: 'small' | 'medium';
  thresholdType: string;
  value: number;
  xScale: (value: number) => number;
  textWidth?: number;
}

export const ThresholdLine = ({
  value,
  label,
  xScale,
  thresholdType,
  showTooltip,
  hideTooltip,
  size,
  barHeight,
  isSmall,
  direction,
  textWidth
}: Props): JSX.Element => {
  const theme = useTheme();

  const scaledValue = xScale(value) + (textWidth || 0) || 0;

  const lineMargin = lineMargins[size];

  const onMouseEnter = (): void =>
    showTooltip({
      tooltipData: label
    });

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

  const lineY1 = useMemo(() => {
    if (direction === 'row') {
      return 0;
    }
    return isSmall
      ? groupMargin - lineMargin
      : groupMargin + lineMargin + margins.top;
  }, [direction, isSmall, groupMargin, lineMargin, margins]);

  const lineY2 = useMemo(() => {
    if (direction === 'row') {
      return barHeight + lineMargin;
    }
    return isSmall
      ? barHeight + groupMargin - lineMargin + margins.top - 6
      : barHeight + groupMargin + lineMargin + 2 * margins.top;
  }, [direction, isSmall, groupMargin, lineMargin, margins]);

  return (
    <>
      <line
        data-testid={`${thresholdType}-line-${value}`}
        stroke={lineColor}
        strokeDasharray="6, 5"
        strokeWidth={2}
        x1={scaledValue}
        x2={scaledValue + 1}
        y1={lineY1}
        y2={lineY2}
      />
      {
        // biome-ignore lint/a11y/noStaticElementInteractions: need it
        <line
          data-testid={`${thresholdType}-line-${value}-tooltip`}
          onMouseEnter={onMouseEnter}
          onMouseLeave={hideTooltip}
          stroke="transparent"
          strokeWidth={5}
          x1={scaledValue}
          x2={scaledValue + 1}
          y1={lineY1}
          y2={lineY2}
        />
      }
    </>
  );
};