import React from 'react';
import { Box } from '../Box';
import { Text } from '../Text';
import { TouchableComponent } from '../TouchableComponent';

export interface ICheckoutIndicators {
  incomes: number;
  missings: number;
  skus: number;
  onPress?: () => void;
  disabled?: boolean;
}

const Divisor = () => (
  <Box height={24} borderRightColor={'gray25'} borderRightWidth={1} />
);

const Indicator = ({ data, label }: { data: number; label: string }) => (
  <Box justifyContent={'center'} alignItems={'center'}>
    <Text variant={'H3'}>{data}</Text>
    <Text variant={'label'} color={'darkBlueGray'}>
      {label}
    </Text>
  </Box>
);

export const CheckoutIndicators = ({
  incomes,
  missings,
  skus,
  onPress,
  disabled = false,
}: ICheckoutIndicators) => (
  <TouchableComponent
    paddingVertical={'spacing-xms'}
    paddingHorizontal={'spacing-m'}
    backgroundColor={'white'}
    flexDirection={'row'}
    justifyContent={'space-around'}
    alignItems={'center'}
    borderRadius={4}
    borderWidth={1}
    borderColor={'gray25'}
    onPress={onPress}
    disabled={disabled}
  >
    <Indicator data={incomes} label={'Ingresos'} />
    <Divisor />
    <Indicator data={missings} label={'Faltantes'} />
    <Divisor />
    <Indicator data={skus} label={'SKU'} />
  </TouchableComponent>
);