import {
  PencilSimple,
  CheckCircle,
  XCircle,
  WarningCircle,
} from 'phosphor-react-native';
import React from 'react';
import { Box } from '../Box';
import { TouchableComponent } from '../TouchableComponent';
import { colors } from '../../theme/theme';
import { Text } from '../Text';

export interface IProductCardCheckout {
  referenceName: string;
  icon: 'approved' | 'rejected' | 'warning';
  packaging: string;
  dueDate: string;
  quantity: number;
  onPress?: () => void;
  disabled?: boolean;
}

export const ProductCardCheckout = ({
  referenceName,
  icon,
  packaging,
  dueDate,
  quantity,
  onPress,
  disabled,
}: IProductCardCheckout) => (
  <TouchableComponent onPress={onPress} disabled={disabled}>
    <Box
      backgroundColor={'white'}
      paddingVertical={'spacing-s'}
      flexDirection={'row'}
      alignItems={'center'}
      justifyContent={'space-between'}
    >
      <Box
        alignItems={'center'}
        justifyContent={'center'}
        width={'15%'}
        maxWidth={56}
      >
        {icon === 'approved' ? (
          <CheckCircle weight="fill" size={25} color={colors.green} />
        ) : icon === 'rejected' ? (
          <XCircle weight="fill" size={25} color={colors.chiperBrandRed} />
        ) : (
          <WarningCircle weight="fill" size={25} color={colors.brightYellow} />
        )}
      </Box>
      <Box width={'60%'}>
        <Text variant={'SubTitle'} marginBottom={'spacing-xxs'}>
          {referenceName}
        </Text>
        <Text
          variant={'body'}
          color={'darkBlueGray'}
          marginBottom={'spacing-xxs'}
        >
          {packaging}
        </Text>
        {dueDate && (
          <Text variant={'body'} color={'darkBlueGray'}>
            VU: {dueDate}
          </Text>
        )}
      </Box>
      <Box
        flexDirection={'row'}
        justifyContent={'flex-end'}
        alignItems={'center'}
        paddingRight={'spacing-s'}
      >
        <Text marginEnd={'spacing-s'} variant={'SubTitle'}>
          {quantity}
        </Text>
        <PencilSimple size={18} />
      </Box>
    </Box>
  </TouchableComponent>
);