import React, { ReactNode } from 'react';
import { StyleSheet } from 'react-native';
import { TouchableComponent } from '../TouchableComponent';
import { Box } from '../Box';
import { Normalize } from '../../utils/normalize';
import { LeftComponent, RightComponent } from './components';

type ProductProps = {
  image?: string;
  referenceName: string;
  brand: string;
  sku: number | string;
  packaging: string;
  quantity?: number;
  currentQuantity?: number;
  placeholder?: string;
  date?: string;
};

type StyleAndLogicProps = {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressImage?: () => void;
  onLongPressOnImage?: () => void;
  icon?: 'approved' | 'rejected' | 'warn' | ReactNode;
  height?: number | string;
  titleLines?: number;
  borderRadius?: number;
  disabled?: boolean;
  bottomContent?: ReactNode;
};

type CardProps = ProductProps & StyleAndLogicProps;

export const ProductCardV2 = ({
  onPress,
  onLongPress,
  onPressImage,
  onLongPressOnImage,
  image,
  referenceName,
  brand,
  sku,
  packaging,
  quantity,
  currentQuantity,
  icon,
  height = Normalize(204),
  borderRadius = Normalize(4),
  titleLines = 2,
  disabled = false,
  bottomContent,
  placeholder,
  date,
}: CardProps) => {
  const onPressOnImageAction = disabled ? undefined : onPressImage;
  const onLongPressOnImageAction = disabled ? undefined : onLongPressOnImage;
  const halfOpacityIfDisabled = disabled
    ? stylesProductCard.halfOpacity
    : stylesProductCard.fullOpaque;

  if ((onPress || onLongPress) && !disabled) {
    return (
      <TouchableComponent
        width={'100%'}
        borderRadius={borderRadius}
        height={height}
        p={'spacing-s'}
        backgroundColor={'white'}
        flexDirection={'row'}
        alignItems={'center'}
        onPress={onPress}
        onLongPress={onLongPress}
      >
        <LeftComponent
          icon={icon}
          halfOpacityIfDisabled={halfOpacityIfDisabled}
          image={image}
          onPressImage={onPressOnImageAction}
          onLongPressOnImage={onLongPressOnImageAction}
          sku={sku}
        />
        <Box width={Normalize(16)} />
        <RightComponent
          placeholder={placeholder}
          date={date}
          referenceName={referenceName}
          brand={brand}
          packaging={packaging}
          totalQuantity={quantity}
          currentQuantity={currentQuantity}
          bottomContent={bottomContent}
          titleLines={titleLines}
          halfOpacityIfDisabled={halfOpacityIfDisabled}
        />
      </TouchableComponent>
    );
  }
  return (
    <Box
      width={'100%'}
      borderRadius={borderRadius}
      height={height}
      backgroundColor={disabled ? 'whiteWithOpacity' : 'white'}
      flexDirection={'row'}
      alignItems={'center'}
      p={'spacing-s'}
    >
      <LeftComponent
        icon={icon}
        halfOpacityIfDisabled={halfOpacityIfDisabled}
        image={image}
        onPressImage={onPressOnImageAction}
        onLongPressOnImage={onLongPressOnImageAction}
        sku={sku}
      />
      <Box width={Normalize(16)} />
      <RightComponent
        placeholder={placeholder}
        date={date}
        referenceName={referenceName}
        brand={brand}
        packaging={packaging}
        totalQuantity={quantity}
        currentQuantity={currentQuantity}
        bottomContent={bottomContent}
        titleLines={titleLines}
        halfOpacityIfDisabled={halfOpacityIfDisabled}
      />
    </Box>
  );
};
const stylesProductCard = StyleSheet.create({
  fullOpaque: { opacity: 1 },
  halfOpacity: { opacity: 0.5 },
});