import React, { ReactNode } from 'react';
import { Image as RNImage, StyleSheet } from 'react-native';
import { Text } from '../Text';
import { Box } from '../Box';
import { TouchableComponent } from '../TouchableComponent';
import { ImageSquare, Barcode } from 'phosphor-react-native';
import { Normalize } from '../../utils/normalize';
import type { Theme } from '../../theme/theme';

export interface IMiniProductCard {
  referenceName: string;
  packaging: string;
  sku?: string;
  image?: string;
  quantity?: number;
  currentQuantity?: number | null;
  onPress?: () => void;
  disabled?: boolean;
  spacing?: boolean;
  footerContent?: ReactNode;
  rightContent?: ReactNode;
  variantReference?: keyof Theme['textVariants'];
  variantPackaging?: keyof Theme['textVariants'];
  variantSku?: keyof Theme['textVariants'];
}

export const MiniProductCard = ({
  referenceName,
  packaging,
  sku,
  quantity,
  currentQuantity,
  image,
  onPress,
  disabled = false,
  footerContent,
  rightContent,
  variantReference = 'body',
  variantPackaging = 'mediumBody',
  variantSku = 'mediumBody',
}: IMiniProductCard) => {
  return (
    <TouchableComponent
      padding={'spacing-s'}
      flexDirection="row"
      backgroundColor={'white'}
      onPress={onPress}
      disabled={disabled}
    >
      <Box
        width={Normalize(73)}
        alignItems={'center'}
        marginRight={'spacing-xs'}
      >
        {!image ? (
          <ImageSquare size={32} weight="fill" />
        ) : (
          <RNImage source={{ uri: image }} style={styles.image} />
        )}
      </Box>
      <Box flexDirection={'column'} flex={1}>
        <Box
          alignItems={'center'}
          flexDirection={'row'}
          marginBottom={'spacing-xs'}
        >
          {quantity != null ? (
            <Text variant={'H4'} color="yankeesBlue">
              {currentQuantity != null ? currentQuantity : quantity}
            </Text>
          ) : null}
          {currentQuantity != null &&
          quantity != null &&
          currentQuantity !== quantity ? (
            <Text
              ml={'spacing-xs'}
              variant={'label'}
              textDecorationLine={'line-through'}
              color="darkBlueGray"
            >
              {quantity}
            </Text>
          ) : null}
        </Box>
        <Text
          variant={variantReference}
          color="yankeesBlue"
          marginBottom={'spacing-xxs'}
          numberOfLines={2}
        >
          {referenceName}
        </Text>
        <Text
          variant={variantPackaging}
          marginBottom={'spacing-xxs'}
          color="yankeesBlue"
        >
          {packaging}
        </Text>
        {sku ? (
          <Box
            justifyContent={'flex-start'}
            flexDirection={'row'}
            alignItems={'center'}
          >
            <Barcode size={14} />
            <Text variant={variantSku} marginLeft={'spacing-xxs'}>
              {sku}
            </Text>
          </Box>
        ) : null}
        {footerContent}
      </Box>
      {rightContent}
    </TouchableComponent>
  );
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    aspectRatio: 1,
    resizeMode: 'contain',
  },
});