import React, { ComponentProps } from 'react';
import { Box } from '../Box';
import { Button } from '../Button';
import { ProgressBar } from '../ProgressBar';
import { Text } from '../Text';

type ProgressBarColor = ComponentProps<typeof ProgressBar>['innerColor'];

export interface IProductProgressBar extends ComponentProps<typeof Button> {
  currentValue: number;
  totalValue: number;
}

export const ProductProgressBar = ({
  currentValue,
  totalValue,
  ...buttonProps
}: IProductProgressBar) => {
  const remainingItems = totalValue - currentValue;
  const progressColor: ProgressBarColor =
    currentValue < totalValue / 2
      ? 'black'
      : remainingItems > 0
      ? 'brightYellow'
      : 'green';

  return (
    <Box backgroundColor={'ghostWhite'} padding={'spacing-s'} width={'100%'}>
      <Box
        marginBottom={'spacing-s'}
        flexDirection="row"
        alignItems={'center'}
        justifyContent={'space-between'}
      >
        <Text variant={'body'} textAlign={'center'}>
          {remainingItems
            ? `Te faltan ${remainingItems} productos`
            : 'Recepción completa'}
        </Text>
        <Box width="16%">
          <ProgressBar
            percent={(currentValue * 100) / totalValue}
            innerColor={progressColor}
            height={8}
          />
        </Box>
      </Box>
      <Button disabled={!!remainingItems} {...buttonProps} />
    </Box>
  );
};