import React, { ReactNode, useState } from 'react';
import { View, ViewProps } from 'react-native';
import { Box } from '../Box';
import { Text } from '../Text';
import type { Theme } from './../../theme/theme';
import {
  ColorProps,
  BackgroundColorProps,
  ResponsiveValue,
  createBox,
} from '@shopify/restyle';

type Props = ColorProps<Theme> &
  BackgroundColorProps<Theme> & {
    innerColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
    borderWidth?: number;
    radius: number;
    percent: number;
    text?: string;
    children?: ReactNode;
  };

const ViewStyledComponent = createBox<Theme, ViewProps>(View);

export const PercentageCircle = ({
  color = 'darkBlueGray',
  backgroundColor = 'gray25',
  innerColor = 'white',
  borderWidth = 4,
  radius,
  percent,
  text,
  children,
}: Props) => {
  const [borderW] = useState(borderWidth < 2 ? 2 : borderWidth);
  const [leftTransformerDegree] = useState(
    percent >= 50 ? (percent - 50) * 3.6 + 'deg' : '0deg'
  );
  const [rightTransformerDegree] = useState(
    percent >= 50 ? '180deg' : percent * 3.6 + 'deg'
  );

  return (
    <Box
      overflow={'hidden'}
      position={'relative'}
      justifyContent={'center'}
      alignItems={'center'}
      width={radius * 2}
      height={radius * 2}
      borderRadius={radius}
      backgroundColor={backgroundColor}
    >
      <Box
        overflow={'hidden'}
        position={'absolute'}
        top={0}
        width={radius}
        height={radius * 2}
        left={0}
      >
        <ViewStyledComponent
          position={'absolute'}
          left={radius || 0}
          top={0}
          borderRadius={1000}
          width={radius}
          height={radius * 2}
          borderTopLeftRadius={0}
          borderBottomLeftRadius={0}
          backgroundColor={color}
          style={{
            transform: [
              { translateX: -radius / 2 },
              { rotate: leftTransformerDegree },
              { translateX: radius / 2 },
            ],
          }}
        />
      </Box>
      <Box
        overflow={'hidden'}
        position={'absolute'}
        top={0}
        width={radius}
        height={radius * 2}
        left={radius}
      >
        <ViewStyledComponent
          position={'absolute'}
          left={-radius || 0}
          top={0}
          borderRadius={1000}
          width={radius}
          height={radius * 2}
          borderTopRightRadius={0}
          borderBottomRightRadius={0}
          backgroundColor={color}
          style={{
            transform: [
              { translateX: radius / 2 },
              { rotate: rightTransformerDegree },
              { translateX: -radius / 2 },
            ],
          }}
        />
      </Box>
      <Box
        overflow={'hidden'}
        position={'relative'}
        justifyContent={'center'}
        alignItems={'center'}
        width={(radius - borderW) * 2}
        height={(radius - borderW) * 2}
        borderRadius={radius - borderW}
        backgroundColor={innerColor}
      >
        {children ? (
          children
        ) : (
          <>
            <Text>{percent}%</Text>
            {text && <Text>{text}</Text>}
          </>
        )}
      </Box>
    </Box>
  );
};