import React, { ReactNode } from 'react';
import { Image, TextProps, View, ViewProps } from 'react-native';
import { createBox, createText } from '@shopify/restyle';
import { TouchableComponent } from '../TouchableComponent';
import { Box } from '../Box';
import { Text } from '../Text';
import { useTheme } from '../../theme/ThemeProvider';
import { BasicInput } from '../BasicInput';
import type { Theme } from '../../theme/theme';

type ProductProps = {
  image: string;
  referenceName: string;
  brand: string;
  sku: number | string;
  packaging: string;
  quantity: number;
  selectedQuantity?: number;
  extraInfo?: string;
};

type StyleAndLogicProps = {
  onPress?: () => void;
  onLongPressOnImage?: () => void;
  onChangeInput?: (text: string) => void;
  children?: ReactNode;
  icon?: ReactNode;
  height?: number | string;
  rightContent?: ReactNode;
  mainSize?: number;
  titleLines?: number;
  skuVariant?: 'warning' | 'muted';
  borderRadius?: number;
};

type CardProps = ProductProps & StyleAndLogicProps;

const ViewComponent = createBox<Theme, ViewProps & { children?: ReactNode }>(
  View
);

const TextComponent = createText<Theme, TextProps & { children?: ReactNode }>(
  Text
);

export const VivoProductCard = ({
  onPress,
  onLongPressOnImage,
  onChangeInput,
  image,
  referenceName,
  brand,
  sku,
  skuVariant,
  packaging,
  quantity,
  selectedQuantity,
  children,
  icon,
  height,
  rightContent,
  extraInfo,
  borderRadius = 0,
  mainSize = 45,
  titleLines = 2,
}: CardProps) => {
  const { fonts } = useTheme();

  const returnValue = () => {
    if (selectedQuantity) {
      return `${selectedQuantity}`;
    } else if (quantity) {
      return `${quantity}`;
    }
    return '';
  };

  const skuBg = () => {
    switch (skuVariant) {
      case 'warning':
        return '#FCF4DE';
      case 'muted':
        return '#DDDFE8';
      default:
        return undefined;
    }
  };

  const skuColor = () => {
    switch (skuVariant) {
      case 'warning':
        return '#FD9535';
      case 'muted':
        return '#666A8F';
      default:
        return undefined;
    }
  };

  return (
    <TouchableComponent
      width={'100%'}
      borderRadius={borderRadius}
      height={height ? height : 108}
      paddingLeft={'spacing-s'}
      backgroundColor={'white'}
      flexDirection="row"
      alignItems={'center'}
      onPress={onPress}
      disabled={!onPress}
    >
      <TouchableComponent
        onLongPress={onLongPressOnImage}
        width="20%"
        height="100%"
        alignItems="center"
        justifyContent="center"
      >
        <Image
          source={{ uri: image }}
          style={{
            width: '75%',
            height: 56,
            resizeMode: 'center',
          }}
        />
      </TouchableComponent>
      <Box
        width={`${mainSize + '%'}`}
        flexDirection="column"
        justifyContent="center"
        height={'100%'}
        paddingVertical={'spacing-xs'}
      >
        <Text
          variant={'body'}
          fontFamily={fonts.caustenRoundBold}
          numberOfLines={titleLines}
        >
          {referenceName}
        </Text>
        {!!brand && (
          <Text variant={'body'} color="yankeesBlue">
            {brand}
          </Text>
        )}
        <Text variant={'label'} color="darkBlueGray">
          {packaging}
        </Text>
        <ViewComponent
          borderRadius={5}
          paddingHorizontal={'spacing-xxs'}
          paddingVertical={'spacing-xxxs'}
          alignSelf="flex-start"
          marginVertical={'spacing-xxxs'}
          style={{
            backgroundColor: skuBg(),
          }}
        >
          <TextComponent
            variant={'label'}
            textAlign={'left'}
            style={{
              color: skuColor(),
            }}
          >
            {sku}
          </TextComponent>
        </ViewComponent>
        {!!extraInfo && (
          <Text variant={'label'} color="yankeesBlue">
            {extraInfo}
          </Text>
        )}
      </Box>
      {rightContent ? null : (
        <Box
          width={`${100 - mainSize - 20 + '%'}`}
          alignItems="center"
          justifyContent="center"
        >
          <Box
            width={'80%'}
            flexDirection={'row'}
            alignItems={'center'}
            justifyContent={icon ? 'space-around' : 'center'}
          >
            <Box
              height={38}
              borderRadius={4}
              alignItems={'center'}
              justifyContent={'center'}
              width={icon ? 40 : 56}
              borderColor={'gray60'}
              borderStyle={'solid'}
              borderWidth={onChangeInput ? 1 : 0}
            >
              <BasicInput
                onChangeText={(text) =>
                  onChangeInput ? onChangeInput(text) : null
                }
                height="100%"
                keyboardType="numeric"
                value={returnValue()}
              />
            </Box>
            {icon}
          </Box>
          {!!children && children}
        </Box>
      )}
      {rightContent}
    </TouchableComponent>
  );
};