import React, { useMemo } from 'react';
import Svg, { G, Circle, Text as SvgText } from 'react-native-svg';
import Animated from 'react-native-reanimated';
import { View } from 'react-native';

import useCircleValues from '../../hooks/useCircleValues';
import COLORS from '../../utils/colors';
import type { ProgressCircleProps } from '../../types';
import CircleGradient from '../circleGradient';
import DashedCircle from '../dashedCircle';

import styles from './styles';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const ProgressCircle: React.FC<ProgressCircleProps> = ({
  circleBackgroundColor = COLORS.TRANSPARENT,
  radius = 60,
  strokeLinecap = 'round',
  activeStrokeColor = COLORS.GREEN,
  activeStrokeSecondaryColor = null,
  activeStrokeWidth = 10,
  inActiveStrokeColor = COLORS.BLACK_30,
  inActiveStrokeWidth = 10,
  inActiveStrokeOpacity = 1,
  dashedStrokeConfig,
  animatedCircleProps,
  startContent = null,
}: ProgressCircleProps) => {
  const viewBox = useMemo(
    () => radius + Math.max(activeStrokeWidth, inActiveStrokeWidth),
    [radius, activeStrokeWidth, inActiveStrokeWidth]
  );
  const { inactiveCircleRadius, activeCircleRadius, circleCircumference } =
    useCircleValues({
      radius,
      activeStrokeWidth,
      inActiveStrokeWidth,
    });

  const maskId = useMemo(
    () =>
      dashedStrokeConfig &&
      dashedStrokeConfig?.count > 0 &&
      dashedStrokeConfig?.width > 0
        ? 'url(#dashed-circle)'
        : undefined,
    [dashedStrokeConfig]
  );

  const strokeColor = useMemo(
    () => (activeStrokeSecondaryColor ? 'url(#grad)' : activeStrokeColor),
    [activeStrokeSecondaryColor, activeStrokeColor]
  );

  // Calculate position for the start content at the top of the circle
  const startContentPosition = useMemo(() => {
    if (!startContent) return null;

    // Position at the top of the circle (12 o'clock position)
    return {
      x: viewBox,
      y: activeStrokeWidth / 2,
    };
  }, [startContent, viewBox, activeStrokeWidth]);

  return (
    <View style={{ width: radius * 2, height: radius * 2, position: 'relative' }}>
      {startContent && (
        <View
          style={{
            position: 'absolute',
            top: 0,
            left: '50%',
            transform: [{ translateX: -2 }],
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 10,
          }}
        >
          {startContent}
        </View>
      )}
      <Svg
        testID="progress-circle"
        width={radius * 2}
        height={radius * 2}
        viewBox={`0 0 ${viewBox * 2} ${viewBox * 2}`}
        style={styles.svg}>

        <CircleGradient
          activeStrokeColor={activeStrokeColor}
          activeStrokeSecondaryColor={activeStrokeSecondaryColor}
        />

        <DashedCircle
          circleCircumference={circleCircumference}
          inActiveStrokeWidth={inActiveStrokeWidth}
          activeStrokeWidth={activeStrokeWidth}
          inactiveCircleRadius={inactiveCircleRadius}
          activeCircleRadius={activeCircleRadius}
          dashedStrokeConfig={dashedStrokeConfig}
        />
        <G mask={maskId}>
          <Circle
            cx="50%"
            cy="50%"
            stroke={inActiveStrokeColor}
            strokeWidth={inActiveStrokeWidth}
            r={inactiveCircleRadius}
            fill={circleBackgroundColor}
            strokeOpacity={inActiveStrokeOpacity}
          />
          <AnimatedCircle
            cx="50%"
            cy="50%"
            stroke={strokeColor}
            strokeWidth={activeStrokeWidth}
            r={activeCircleRadius}
            fill={COLORS.TRANSPARENT}
            strokeDasharray={circleCircumference}
            strokeLinecap={strokeLinecap}
            animatedProps={animatedCircleProps}
          />
        </G>
      </Svg>
    </View>
  );
};

export default ProgressCircle;