import React from 'react';
import { Box } from '../Box';
import { colors, Theme } from '../../theme/theme';
import type { BackgroundColorProps, ResponsiveValue } from '@shopify/restyle';
import { Bar } from './Bar';
import { Flag } from 'phosphor-react-native';

export type Props = BackgroundColorProps<Theme> & {
  height?: number;
  innerColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
  marginVertical?: ResponsiveValue<keyof Theme['spacing'], Theme>;
  percent: number;
  text?: string;
  withGoal?: boolean;
};

export const ProgressBar = ({
  backgroundColor = 'gray25',
  height = 16,
  innerColor = 'green',
  percent,
  withGoal = false,
  ...rest
}: Props) => {
  if (withGoal) {
    return (
      <Box position={'relative'} justifyContent={'center'} height={height + 18}>
        <Bar {...{ percent, backgroundColor, innerColor, height, ...rest }} />
        <Box
          position={'absolute'}
          right={0}
          backgroundColor={'gray60'}
          borderWidth={6}
          borderColor={percent >= 100 ? innerColor : backgroundColor}
          borderRadius={50}
          padding={'spacing-xxs'}
        >
          <Flag color={colors.white} size={height * 0.8} />
        </Box>
      </Box>
    );
  }

  return <Bar {...{ percent, backgroundColor, innerColor, height, ...rest }} />;
};