import React from 'react';
import { Box } from '../Box';
import { TouchableComponent } from '../TouchableComponent';
import { Text } from '../Text';
import { CaretRight } from 'phosphor-react-native';
import { OrderTag } from '../OrderTag';

export interface IOrderCard {
  title: string;
  status: 'new' | 'inProcess' | 'finalized';
  subtitle: string;
  footer?: string;
  rightText?: string;
  disabled?: boolean;
  onPress?: () => void;
  tagDescription?: string;
}

export const OrderCard = ({
  title,
  status,
  subtitle,
  footer,
  rightText,
  disabled = false,
  onPress,
  tagDescription = '',
}: IOrderCard) => {
  const showTag = status === 'new' || status === 'inProcess';

  return (
    <TouchableComponent
      padding={'spacing-s'}
      backgroundColor={'white'}
      onPress={onPress}
      disabled={disabled}
      flexDirection={'row'}
    >
      <Box flex={1}>
        {showTag && <OrderTag status={status} text={tagDescription} />}
        <Box
          flexDirection={'row'}
          justifyContent={'space-between'}
          alignItems={'flex-start'}
        >
          <Box>
            <Text variant={'SubTitle'} color={'yankeesBlue'} numberOfLines={2}>
              {title}
            </Text>
            <Text
              variant={'body'}
              color={'darkBlueGray'}
              marginVertical={'spacing-xxs'}
            >
              {subtitle}
            </Text>
            {footer && (
              <Text variant={'body'} color={'darkBlueGray'}>
                {footer}
              </Text>
            )}
          </Box>
        </Box>
      </Box>
      <Box
        flexDirection={'row'}
        justifyContent={'center'}
        alignItems={'center'}
        height={'100%'}
      >
        {rightText && (
          <Text marginEnd={'spacing-xs'} variant={'SubTitle'}>
            {rightText}
          </Text>
        )}
        <CaretRight size={18} />
      </Box>
    </TouchableComponent>
  );
};