circular svg

import React, { Component } from 'react';
import { Image } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import styled from 'styled-components/native';
import { Colors, moderateScale } from '../../constants';
import { LevelCircleContainer } from '../shared/components/level/LevelDetails/styled';
import { Box, Container, Text } from '../shared/ui';
import { Icons } from '../shared/ui/icons';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

class MissionBadge extends Component {
  constructor(props) {
    super(props);
    const { size } = props;
    this.state = {
      cx: size / 2,
      cy: size / 2,
      r: (size / 2) * 0.85
    };
  }

  polarToCartesian(angle) {
    const { cx, cy, r } = this.state;
    const a = ((angle - 270) * Math.PI) / 180.0;
    const x = cx + r * Math.cos(a);
    const y = cy + r * Math.sin(a);
    return { x, y };
  }

  render() {
    const { size, value, meterColor, done = false, name, level } = this.props;
    const { r } = this.state;
    const startCoord = this.polarToCartesian(0);
    const endCoord = this.polarToCartesian(value);
    return (
      <Box height={size + 20} column>
        {/* <AnimatedCircularProgress
          size={size}
          width={4}
          fill={23}
          rotation={360}
          tintColor={meterColor}
          backgroundColor={Colors.ConfrariaLevelGreyDark}
        >
          {() => (
            <Image
              source={require('../../assets/img/header/image-selo-rio.png')}
              style={{ width: size, height: size, borderRadius: size / 2 }}
            />
          )}
        </AnimatedCircularProgress> */}
        {/* <Svg
          onLayout={this.onLayout}
          width={size}
          height={size}
          style={{ zIndex: 99, transform: [{ rotate: '180deg' }] }}
        >
          <Path
            stroke={meterColor}
            strokeWidth={8}
            fill="none"
            d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value > 180 ? 1 : 0} 1 ${
              endCoord.x
            } ${endCoord.y}`}
          />
          <Path
            stroke={Colors.ConfrariaLevelGreyDark}
            strokeWidth={8}
            fill="none"
            d={`M${endCoord.x} ${endCoord.y} A ${r} ${r} 0 ${value < 180 ? 1 : 0} 1 ${
              startCoord.x
            } ${startCoord.y}`}
          />
        </Svg> */}
        {/* <FloatIcon absolute left={45} top={-40} done={!done}>
          <LevelCircleContainer status="achieved" size={34} isFinal>
            <Icons.Star />
          </LevelCircleContainer>
        </FloatIcon>
        <RoundWhite size={size}>
          <Stamp
            source={require('../../assets/img/header/image-selo-rio.png')}
            resizeMode="cover"
            img
            size={size}
          />
        </RoundWhite>
        {name && (
          <Container top={-165} te>
            <Text color={Colors.DarkGrey} weight="SemiBold" size={15.4} lineHeight={19.2}>
              {name}
            </Text>
            <Text color={Colors.UltraLightGrey} align="center">
              Nível {level}
            </Text>
          </Container>
        )} */}
      </Box>
    );
  }
}

MissionBadge.defaultProps = {
  size: 150,
  meterColor: Colors.ConfrariaLevelGreen,
  value: 359.999
};

export default MissionBadge;

const RoundWhite = styled(Container)`
  height: ${({ size }) => moderateScale(size - 20)};
  width: ${({ size }) => moderateScale(size - 20)};
  top: ${({ size }) => moderateScale(-size - 24)};
  background-color: #fff;
  border-radius: ${({ size }) => moderateScale((size - 20) / 2)};
  justify-content: center;
  align-items: center;
`;

const FloatIcon = styled(Container)`
  z-index: 99;
  ${({ done }) => done && 'opacity: 0'};
`;

const Stamp = styled(Image)`
  z-index: -98;
  height: ${({ size }) => moderateScale(size * 0.7)};
  width: ${({ size }) => moderateScale(size * 0.7)};
`;