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

export interface IAutoCompleteProductCard {
  referenceName: string;
  packaging: string;
  image?: string;
  search?: string;
  onPress?: () => void;
  onRightPress?: () => void;
  disabled?: boolean;
}

export const AutoCompleteProductCard = ({
  referenceName,
  packaging,
  image,
  search,
  onPress,
  onRightPress,
  disabled = false,
}: IAutoCompleteProductCard) => (
  <TouchableComponent
    paddingHorizontal={'spacing-s'}
    paddingVertical={'spacing-xs'}
    flexDirection="row"
    backgroundColor={'white'}
    onPress={onPress}
    disabled={disabled}
  >
    <Box
      width={Normalize(40)}
      justifyContent={'flex-start'}
      alignItems={'center'}
      marginRight={'spacing-xs'}
    >
      {!image ? (
        <ImageSquare size={24} weight="fill" />
      ) : (
        <RNImage
          source={{ uri: image }}
          style={{ width: '100%', aspectRatio: 1, resizeMode: 'contain' }}
        />
      )}
    </Box>
    <Box flex={1} flexDirection={'column'}>
      <SearchedText text={referenceName} search={search} />
      <Text variant={'mediumBody'} color="yankeesBlue">
        {packaging}
      </Text>
    </Box>
    <TouchableComponent
      onPress={onRightPress}
      width={Normalize(24)}
      alignItems={'center'}
      justifyContent={'center'}
    >
      <ArrowUpLeft size={18} color={colors.darkBlueGray} />
    </TouchableComponent>
  </TouchableComponent>
);