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

import { scaleOrdinal } from '@visx/scale';
import { Pie } from '@visx/shape';
import { identity } from 'ramda';

import { getColorFromDataAndTresholds } from '../common/utils';
import AnimatedPie from './AnimatedPie';
import type { GaugeProps } from './models';
import { thresholdThickness } from './Thresholds';
import { getAngles } from './utils';

const dataThickness = 45;

const PieData = ({
  metric,
  adaptedMaxValue,
  thresholds,
  radius,
  baseColor
}: Omit<
  GaugeProps,
  'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
>): JSX.Element => {
  const theme = useTheme();

  // @ts-expect-error - suppressing pre-existing type mismatch
  const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
  const pieColor = getColorFromDataAndTresholds({
    baseColor,
    // @ts-expect-error - suppressing pre-existing type mismatch
    data: metric.data[0],
    theme,
    thresholds
  });

  const getDataColor = scaleOrdinal({
    // @ts-expect-error - suppressing pre-existing type mismatch
    domain: pieData,
    range: [pieColor, 'transparent']
  });

  const dataThicknessFactor = radius / dataThickness / 3;
  const thresholdThicknessFactor = radius / thresholdThickness / 15;

  return (
    <Pie
      {...getAngles()}
      data={pieData}
      innerRadius={radius - dataThickness * dataThicknessFactor}
      outerRadius={
        radius - thresholdThickness * thresholdThicknessFactor * 1.25
      }
      pieSortValues={() => -1}
      // @ts-expect-error - suppressing pre-existing type mismatch
      pieValue={identity}
    >
      {(pie) => (
        // @ts-expect-error - suppressing pre-existing type mismatch
        <AnimatedPie<number>
          {...pie}
          animate
          getColor={(arc) => getDataColor(arc.data)}
          getKey={(arc) => `${arc.data}`}
          thresholds={thresholds}
        />
      )}
    </Pie>
  );
};

export default PieData;