import React, { ReactNode } from 'react';
import { Box } from '../Box';
import { Text } from '../Text';
import { ProgressBar } from '../ProgressBar';
import { SwipeButton } from '../SwipeButton';
import { CollapsibleButton, CollapsibleContent } from '../Collapsible';
import { CollapsibleProvider } from '../Collapsible/providers/context';

interface Props {
  currentValue: number;
  totalValue: number;
  label: string;
  onPress: () => void;
  loading: boolean;
  children?: ReactNode;
}

export const ProgressValidation = ({
  currentValue,
  totalValue,
  label,
  onPress,
  loading,
  children,
}: Props) => {
  return (
    <CollapsibleProvider>
      <Box
        backgroundColor={'gray5'}
        padding={'spacing-s'}
        shadowColor={'yankeesBlue'}
        shadowOpacity={0.2}
        shadowRadius={2.6}
        shadowOffset={{ width: 0, height: -2 }}
        elevation={4}
      >
        <Text
          variant={'label'}
          textAlign={'center'}
          fontFamily={'CaustenRound-Regular'}
          color={'yankeesBlue'}
        >
          Llevas {currentValue} de {totalValue} productos
        </Text>
        {children && (
          <CollapsibleButton
            position={'absolute'}
            right={0}
            px={'spacing-xxxs'}
            py={'spacing-xs'}
            mr={'spacing-s'}
          />
        )}
        <Box marginHorizontal={'spacing-xs'}>
          <ProgressBar
            percent={(currentValue * 100) / totalValue}
            innerColor={'yankeesBlue'}
            height={4}
            marginVertical={'spacing-xs'}
          />
        </Box>
        {children && (
          <CollapsibleContent pb={'spacing-xs'}>{children}</CollapsibleContent>
        )}
        <SwipeButton
          title={label}
          disabled={currentValue !== totalValue}
          shouldResetAfterSuccess
          loading={loading}
          onSwipeSuccess={onPress}
        />
      </Box>
    </CollapsibleProvider>
  );
};