import React from 'react';
import { Defs, G, LinearGradient, Path, Stop, Svg } from 'react-native-svg';
import { AngleGradient } from '../../../common/components/angle-gradient';
import { fp as _ } from '../../../common/utils/fp';
import {
  getDonutParameters,
  getDonutPercentage,
} from '../../../graph/transducers';
import {
  getCircularArcColor,
  getCircularArcPathGenerator,
  getCircularArcSections,
} from '../../transducers';

type TProps = {
  size: number;
  total: number;
  value: number;
};

export const CircularArc: React.FC<TProps> = ({ size, total, value }) => {
  const percentage = getDonutPercentage(total, value);
  const colors = getCircularArcColor(percentage);

  const percentageRound = percentage > 0 && percentage <= 5 ? 5 : percentage;
  const sectionAngles = getCircularArcSections([
    { value: percentageRound },
    { value: 100 - percentageRound },
  ]);

  const { gradientAngle } = getDonutParameters(
    sectionAngles,
    total,
    size,
    size
  );

  const pathGenerator = getCircularArcPathGenerator();

  return (
    <Svg width={size} height={size}>
      <Defs>
        <AngleGradient angle={gradientAngle[0]}>
          <LinearGradient id="grad">
            <Stop offset="1" stopColor={_.path([0, 'start'], colors)} />
            <Stop offset="0" stopColor={_.path([0, 'end'], colors)} />
          </LinearGradient>
        </AngleGradient>
      </Defs>
      <G transform={`translate(${size / 2}, ${size / 2})`}>
        <Path
          d={pathGenerator(sectionAngles[0])!}
          fill="url(#grad)"
          strokeWidth={1}
        />
      </G>
    </Svg>
  );
};