import React from 'react';
import { Image as RNImage } from 'react-native';
import { Box } from '../Box';
import { Text } from '../Text';
import { TouchableComponent } from '../TouchableComponent';
import { ImageSquare, Barcode, StackSimple } from 'phosphor-react-native';
import { SearchedText } from './SearchedText';
import { Normalize } from '../../utils/normalize';

export interface IManualMovProductCard {
  quantity: number;
  referenceName: string;
  packaging: string;
  sku: string;
  place: string;
  dueDate?: string;
  image?: string;
  onPress?: () => void;
  disabled?: boolean;
  search?: string;
}

export const ManualMovProductCard = ({
  quantity,
  referenceName,
  packaging,
  sku,
  place,
  image,
  search,
  onPress,
  disabled = false,
}: IManualMovProductCard) => (
  <TouchableComponent
    padding={'spacing-s'}
    flexDirection="row"
    backgroundColor={'white'}
    onPress={onPress}
    disabled={disabled}
  >
    <Box
      width={Normalize(40)}
      justifyContent={'flex-start'}
      alignItems={'center'}
      marginRight={'spacing-xs'}
      padding={'spacing-none'}
    >
      {!image ? (
        <ImageSquare size={32} weight="fill" />
      ) : (
        <RNImage
          source={{ uri: image }}
          style={{ width: '100%', aspectRatio: 1, resizeMode: 'contain' }}
        />
      )}
    </Box>
    <Box flexDirection={'column'} flex={1}>
      <Text variant={'H4'} marginBottom={'spacing-xs'} color="yankeesBlue">
        {quantity}
      </Text>
      <SearchedText text={referenceName} search={search} />
      <Text
        variant={'mediumBody'}
        color="yankeesBlue"
        marginBottom={'spacing-xxs'}
      >
        {packaging}
      </Text>
      <Box
        justifyContent={'flex-start'}
        flexDirection={'row'}
        alignItems={'center'}
        marginBottom={'spacing-xxs'}
      >
        <StackSimple weight="fill" size={16} />
        <Text
          variant={'mediumBody'}
          marginLeft={'spacing-xxs'}
          color="yankeesBlue"
          fontFamily={'CaustenRound-Bold'}
        >
          {place}
        </Text>
      </Box>
      <Box
        justifyContent={'flex-start'}
        flexDirection={'row'}
        alignItems={'center'}
      >
        <Barcode size={14} />
        <Text variant={'mediumBody'} marginLeft={'spacing-xxs'}>
          {sku}
        </Text>
      </Box>
    </Box>
  </TouchableComponent>
);