import React from "react";
import {
  IconButton,
  Image,
  Text,
  VStack,
  FactoryComponentProps,
  ITextProps,
  IImageProps,
} from "native-base";

import { EnhancedTouchableOpacity } from "../../EnhancedTouchableOpacity";
import { ForwardMedium } from "../../../../icons/navigation";
import type { IColors } from "native-base/lib/typescript/theme/base/colors";
import type { IFlipColors } from "../../../../config/interfaces/IFlipColors";
import type { ImageSourcePropType, TouchableOpacityProps } from "react-native";

export interface DirectionCardProps
  extends TouchableOpacityProps,
    Omit<FactoryComponentProps, "children"> {
  title: React.ReactNode | string;
  titleProps?: ITextProps;
  description?: React.ReactNode | string;
  descriptionProps?: ITextProps;
  illustration?: ImageSourcePropType;
  illustrationProps?: IImageProps;
  customButton?: React.ReactElement;
  onPressIcon?: () => void;
  rightIcon?: JSX.Element;
  rightIconColor?: IFlipColors | IColors;
  as?: React.ComponentType<any>;
}

const StyledEnhancedTouchableOpacity = EnhancedTouchableOpacity;

export const DirectionCard: React.FC<DirectionCardProps> = (props) => {
  const {
    as,
    illustration,
    title,
    description,
    customButton,
    onPressIcon,
    rightIcon,
    rightIconColor,
    titleProps,
    descriptionProps,
    illustrationProps,
    ...rest
  } = props;
  const isDescAvailable = !!description;
  return (
    <StyledEnhancedTouchableOpacity
      bg="neutral.White"
      borderWidth="1.5px"
      borderColor="neutral.BorderAndDisabled"
      rounded="16"
      p="16px"
      as={as}
      display="flex"
      flexDirection="row"
      alignItems="center"
      {...rest}
    >
      {illustration ? (
        <Image
          height={isDescAvailable ? "46px" : "24px"}
          width={isDescAvailable ? "46px" : "24px"}
          resizeMode="contain"
          source={illustration}
          mr={isDescAvailable ? "4" : "2"}
          rounded={100}
          {...illustrationProps}
        />
      ) : (
        <></>
      )}
      <VStack flex={1} mr="4">
        {title && (
          <Text fontSize="sm" lineHeight="22px" {...titleProps}>
            {title}
          </Text>
        )}
        {description && !React.isValidElement(description) && (
          <Text
            color="neutral.SecondaryText"
            fontSize="sm"
            {...descriptionProps}
          >
            {description}
          </Text>
        )}
        {description && React.isValidElement(description) && description}
      </VStack>
      {!!customButton ? (
        customButton
      ) : (
        <IconButton
          onPress={onPressIcon}
          variant="clean"
          p="0"
          icon={
            rightIcon ?? (
              <ForwardMedium
                size="6"
                color={rightIconColor ?? "neutral.SecondaryText"}
              />
            )
          }
        />
      )}
    </StyledEnhancedTouchableOpacity>
  );
};

export default DirectionCard;