import React from 'react';
import {Circle, Defs, Mask, Rect, Svg} from 'react-native-svg';
import Animated from 'react-native-reanimated';
import {BORDER_RADIUS, COLORS, useTheme} from '@shared/theme';
import {hexToRgb} from '@shared/colors';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const OVERLAY_COLOR = hexToRgb(COLORS.grey[900], 0.6);

interface Props {
  radius: number;
  xPosition: number;
  yPosition: number;
  circumferenceLength: number;
  isSetUp: boolean;
  hideCircle: boolean;
  animatedProps: Partial<{strokeDashoffset: number}>;
}

function CircleLayer({
  animatedProps,
  radius,
  xPosition,
  yPosition,
  circumferenceLength,
  isSetUp,
  hideCircle,
}: Props) {
  const {theme, colors} = useTheme();

  return (
    <Svg height="100%" width="100%">
      {isSetUp && (
        <AnimatedCircle
          r={radius}
          cx={xPosition}
          cy={yPosition}
          fill="transparent"
          stroke={theme.graphics.success[500]}
          strokeDasharray={circumferenceLength}
          strokeDashoffset={circumferenceLength}
          animatedProps={animatedProps}
          strokeLinecap="square"
          strokeWidth={BORDER_RADIUS.s}
        />
      )}
      <Defs>
        <Mask id="mask" x="0" y="0" height="100%" width="100%">
          <Rect height="100%" width="100%" fill={colors.neutral} />
          {!hideCircle && <Circle r={radius} cx={xPosition} cy={yPosition} />}
        </Mask>
      </Defs>
      <Rect
        height="100%"
        width="100%"
        fill={OVERLAY_COLOR}
        mask="url(#mask)"
        fill-opacity="0"
      />
    </Svg>
  );
}

export default CircleLayer;