import React, { ReactNode } from 'react';
import {
  Image as RNImage,
  StyleSheet,
  TextProps,
  View,
  ViewProps,
} from 'react-native';
import { TouchableComponent } from '../TouchableComponent';
import { Box } from '../Box';
import { Text } from '../Text';
import { useTheme } from '../../theme/ThemeProvider';
import type { Theme } from '../../theme/theme';
import { createBox, createText } from '@shopify/restyle';
import { ImageSquare } from 'phosphor-react-native';
import CheckCircle from '../../icons/CheckCircle';
import XCircle from '../../icons/XCircle';
import WarningCircle from '../../icons/WarningCircle';
import { Badge, BadgeProps } from '../Badge';

type ProductProps = {
  image?: string;
  referenceName: string;
  brand: string;
  sku: number | string;
  packaging: string;
  quantity?: number;
  currentQuantity?: number;
  extraInfo?: string;
  ean14?: boolean;
  quantityBadge?: BadgeProps['variant'];
};

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

type CardProps = ProductProps & StyleAndLogicProps;

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

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

const Image = ({
  image,
  onPressImage,
  onLongPressOnImage,
  style,
}: {
  image?: string;
  onPressImage?: () => void;
  onLongPressOnImage?: () => void;
  style?: object;
}) => {
  if (onPressImage || onLongPressOnImage) {
    return (
      <TouchableComponent
        onPress={onPressImage}
        onLongPress={onLongPressOnImage}
        width="17%"
        height="100%"
        alignItems="center"
        justifyContent="center"
      >
        <RNImage
          source={{ uri: image }}
          // eslint-disable-next-line react-native/no-inline-styles
          style={{
            width: '70%',
            height: 56,
            resizeMode: 'center',
            ...style,
          }}
        />
      </TouchableComponent>
    );
  }

  return (
    <Box
      width="17%"
      height={56}
      alignItems="center"
      justifyContent="center"
      backgroundColor={!image ? 'gray25' : 'white'}
      borderRadius={4}
    >
      {!image ? (
        <ImageSquare size={24} weight="fill" />
      ) : (
        <RNImage
          source={{ uri: image }}
          // eslint-disable-next-line react-native/no-inline-styles
          style={{
            width: '70%',
            height: 56,
            resizeMode: 'center',
            ...style,
          }}
        />
      )}
    </Box>
  );
};

export const ProductCard = ({
  onPress,
  onLongPress,
  onPressImage,
  onLongPressOnImage,
  image,
  referenceName,
  brand,
  sku,
  packaging,
  quantity,
  currentQuantity,
  children,
  icon,
  height,
  rightContent,
  extraInfo,
  ean14 = false,
  borderRadius = 4,
  titleLines = 1,
  quantityBadge,
  disabled = false,
  disabledTooltipComponent,
}: CardProps) => {
  const { fonts, colors } = useTheme();
  const onPressOnImageAction = disabled ? undefined : onPressImage;
  const onLongPressOnImageAction = disabled ? undefined : onLongPressOnImage;
  const halfOpacityIfDisabled = disabled
    ? stylesProductCard.halfOpacity
    : stylesProductCard.fullOpaque;
  const Content = () => (
    <>
      <Image
        style={halfOpacityIfDisabled}
        image={image}
        onPressImage={onPressOnImageAction}
        onLongPressOnImage={onLongPressOnImageAction}
      />
      <Box
        flex={1}
        flexDirection="column"
        justifyContent="center"
        height={'100%'}
        paddingLeft="spacing-xms"
        paddingVertical={'spacing-xs'}
      >
        <Box flexDirection="row" alignItems={'center'}>
          <Text
            variant={'label'}
            color="yankeesBlue"
            fontFamily={fonts.caustenRoundRegular}
            numberOfLines={titleLines}
            mr={'spacing-xxs'}
            style={halfOpacityIfDisabled}
          >
            {referenceName}
          </Text>
          {disabledTooltipComponent && disabledTooltipComponent}
        </Box>
        {!!brand && (
          <Text
            variant={'label'}
            color="yankeesBlue"
            fontFamily={fonts.caustenRoundRegular}
            style={halfOpacityIfDisabled}
          >
            {brand}
          </Text>
        )}
        <Text
          variant={'SubHead'}
          color="darkBlueGray"
          fontFamily={fonts.caustenRoundRegular}
          style={halfOpacityIfDisabled}
        >
          {packaging}
        </Text>
        <ViewComponent
          borderRadius={5}
          paddingHorizontal={'spacing-xxs'}
          paddingVertical={'spacing-xxxs'}
          alignSelf={'flex-start'}
          marginVertical={'spacing-xxxs'}
          // eslint-disable-next-line react-native/no-inline-styles
          style={{
            backgroundColor: ean14 ? '#FCF4DE' : '#DDDFE8',
          }}
        >
          <TextComponent
            variant={'label'}
            textAlign={'left'}
            fontFamily={'CaustenRound-Bold'}
            // eslint-disable-next-line react-native/no-inline-styles
            style={{
              color: ean14 ? '#FD9535' : '#666A8F',
              opacity: disabled ? 0.5 : 1,
            }}
          >
            {sku}
          </TextComponent>
        </ViewComponent>
        {!!extraInfo && (
          <Text variant={'label'} color="yankeesBlue">
            {extraInfo}
          </Text>
        )}
      </Box>
      {!rightContent && (currentQuantity || quantity || icon || children) && (
        <Box
          alignItems="center"
          justifyContent="center"
          paddingLeft={'spacing-xs'}
          paddingRight={quantityBadge ? 'spacing-xs' : 'spacing-none'}
          flexDirection="row"
        >
          <Box alignItems={'flex-end'}>
            <Box position={'relative'}>
              <Text
                variant={'body'}
                fontFamily={fonts.caustenRoundBold}
                color="yankeesBlue"
                style={halfOpacityIfDisabled}
              >
                {currentQuantity !== undefined ? currentQuantity : quantity}
              </Text>
              {quantityBadge && (
                <Box position="absolute" top={0} right={-6}>
                  <Badge
                    type="dot"
                    variant={quantityBadge}
                    style={halfOpacityIfDisabled}
                  />
                </Box>
              )}
            </Box>
            {currentQuantity === undefined ||
            currentQuantity === quantity ? null : (
              <Text
                color="darkBlueGray"
                textDecorationLine={'line-through'}
                style={halfOpacityIfDisabled}
              >
                {quantity || currentQuantity}
              </Text>
            )}
            {!!children && children}
          </Box>
          {icon ? (
            <Box paddingLeft={'spacing-xs'}>
              {icon === 'approved' ? (
                <CheckCircle
                  fill={colors.green}
                  style={halfOpacityIfDisabled}
                />
              ) : icon === 'rejected' ? (
                <XCircle
                  fill={colors.chiperBrandRed}
                  style={halfOpacityIfDisabled}
                />
              ) : icon === 'warn' ? (
                <WarningCircle fill={'#FD9535'} style={halfOpacityIfDisabled} />
              ) : (
                icon
              )}
            </Box>
          ) : null}
        </Box>
      )}
      {rightContent}
    </>
  );

  if ((onPress || onLongPress) && !disabled) {
    return (
      <TouchableComponent
        width={'100%'}
        borderRadius={borderRadius}
        height={height ? height : 108}
        paddingHorizontal={'spacing-s'}
        backgroundColor={'white'}
        flexDirection={'row'}
        alignItems={'center'}
        onPress={onPress}
        onLongPress={onLongPress}
      >
        <Content />
      </TouchableComponent>
    );
  }
  return (
    <Box
      width={'100%'}
      borderRadius={borderRadius}
      height={height ? height : 108}
      backgroundColor={disabled ? 'whiteWithOpacity' : 'white'}
      flexDirection={'row'}
      alignItems={'center'}
      paddingHorizontal={'spacing-s'}
    >
      <Content />
    </Box>
  );
};
const stylesProductCard = StyleSheet.create({
  fullOpaque: { opacity: 1 },
  halfOpacity: { opacity: 0.5 },
});