import type { ResponsiveValue } from '@shopify/restyle';
import React, { ReactNode } from 'react';
import { useTheme } from '../../theme/ThemeProvider';
import type { Theme } from './../../theme/theme';
import { Box } from '../Box';
import { Text } from '../Text';
import { CardContainer } from '../CardContainer';
import { TouchableComponent } from '../TouchableComponent';
import CaretRight from '../../icons/CaretRight';
import { Badge, BadgeProps, TypeBadge } from '../Badge';

interface CardProps {
  icon?: ReactNode;
  iconBadge?: TypeBadge;
  iconBadgeVariant?: BadgeProps['variant'];
  iconAlign?: 'center' | 'flex-end' | 'flex-start';
  title: string;
  titleVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  titleWeight?: 'regular' | 'bold';
  titleColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
  subtitle?: string;
  subtitleVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  subtitleWeight?: 'regular' | 'bold';
  subtitleColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
  innerComponent?: ReactNode;
  footerText?: string;
  footerTextVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  footerTextWeight?: 'regular' | 'bold';
  footerTextColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
  rightComponent?: ReactNode;
  rightIcon?: ReactNode | 'CaretRight';
  footerComponent?: ReactNode;
  withCardContainer?: boolean;
}

type Props = React.ComponentProps<typeof TouchableComponent> & CardProps;

export const CardBasicItem = ({
  icon,
  iconBadge,
  iconBadgeVariant = 'primary',
  iconAlign = 'center',
  title,
  titleVariant = 'body',
  titleWeight = 'bold',
  titleColor,
  subtitle,
  subtitleVariant = 'label',
  subtitleWeight = 'regular',
  subtitleColor,
  innerComponent,
  footerText,
  footerTextVariant = 'SubHead',
  footerTextWeight = 'regular',
  footerTextColor = 'darkBlueGray',
  rightComponent,
  rightIcon = undefined,
  footerComponent,
  withCardContainer = true,
  bg,
  backgroundColor = 'white',
  onPress,
  ...props
}: Props) => {
  const { fonts } = useTheme();

  const CardBasicItemComponent = (
    cardProps: React.ComponentProps<typeof TouchableComponent>
  ) => {
    return (
      <TouchableComponent
        width={'100%'}
        {...cardProps}
        {...{ bg, backgroundColor, onPress }}
      >
        <Box flexDirection={'row'} alignItems={'center'}>
          {!!icon && (
            <Box alignSelf={iconAlign} marginRight={'spacing-xs'}>
              {icon}
              {true && (
                <Box position="absolute" top={0} right={-3}>
                  {iconBadge && (
                    <Badge type={iconBadge} variant={iconBadgeVariant} />
                  )}
                </Box>
              )}
            </Box>
          )}
          <Box flex={1}>
            <Text
              variant={titleVariant}
              color={titleColor}
              fontFamily={
                titleWeight === 'bold'
                  ? fonts.caustenRoundBold
                  : fonts.caustenRoundRegular
              }
            >
              {title}
            </Text>
            {!!subtitle && (
              <Text
                variant={subtitleVariant}
                color={subtitleColor}
                fontFamily={
                  subtitleWeight === 'bold'
                    ? fonts.caustenRoundBold
                    : fonts.caustenRoundRegular
                }
              >
                {subtitle}
              </Text>
            )}
            {!!innerComponent && <Box>{innerComponent}</Box>}
            {!!footerText && (
              <Text
                variant={footerTextVariant}
                color={footerTextColor}
                fontFamily={
                  footerTextWeight === 'bold'
                    ? fonts.caustenRoundBold
                    : fonts.caustenRoundRegular
                }
              >
                {footerText}
              </Text>
            )}
          </Box>
          {!!rightComponent && (
            <Box marginLeft={'spacing-xs'}>{rightComponent}</Box>
          )}
          {!!rightIcon && (
            <Box marginLeft={'spacing-xs'}>
              {rightIcon === 'CaretRight' ? <CaretRight /> : rightIcon}
            </Box>
          )}
        </Box>
        {!!footerComponent && (
          <Box marginTop={'spacing-xs'}>{footerComponent}</Box>
        )}
      </TouchableComponent>
    );
  };

  if (withCardContainer) {
    return (
      <CardContainer {...props} {...{ bg, backgroundColor, onPress }}>
        <CardBasicItemComponent />
      </CardContainer>
    );
  }

  return <CardBasicItemComponent {...props} />;
};