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

interface CardProps {
  title: string;
  titleVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  subtitle?: string;
  subtitleVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  onPress?: () => void;
  disabled?: boolean;
  onInfoPress?: () => void;
  titleIcon?: ReactNode;
  rightIcon?: ReactNode;
}

interface internalCardProps extends CardProps {
  width: string;
  relativePosition: 'left' | 'middle' | 'right';
}

type CardGroupProps = React.ComponentProps<typeof Box> & {
  leftComponent: CardProps;
  middleComponent?: CardProps;
  rightComponent: CardProps;
  width?: string | number;
  height?: string | number;
  withCardContainer?: boolean;
};

export const CardGroup = ({
  leftComponent,
  middleComponent,
  rightComponent,
  width = '100%',
  withCardContainer = true,
  ...props
}: CardGroupProps) => {
  const { fonts } = useTheme();

  const Card = ({
    title,
    titleVariant = 'H3',
    subtitle,
    subtitleVariant = 'label',
    width: widthCard,
    onPress,
    disabled,
    onInfoPress,
    relativePosition,
    rightIcon,
    titleIcon,
  }: internalCardProps) => {
    return (
      <TouchableComponent
        disabled={!onPress || disabled}
        onPress={onPress}
        width={widthCard}
        justifyContent={'center'}
        flexDirection={'row'}
      >
        {onInfoPress && relativePosition === 'left' ? (
          <TouchableComponent onPress={onInfoPress} alignSelf={'center'}>
            <InfoIcon />
          </TouchableComponent>
        ) : null}
        <Box width={'95%'} alignItems={'center'}>
          <Text variant={titleVariant} fontFamily={fonts.caustenRoundBold}>
            {!!titleIcon && <Box marginRight={'spacing-xs'}>{titleIcon}</Box>}
            {` ${title}`}
          </Text>
          {subtitle && (
            <Text
              textAlign={'center'}
              textDecorationLine={onPress && 'underline'}
              variant={subtitleVariant}
              fontFamily={fonts.caustenRoundRegular}
            >
              {subtitle}
            </Text>
          )}
        </Box>
        {onInfoPress && relativePosition === 'right' ? (
          <TouchableComponent onPress={onInfoPress} alignSelf={'center'}>
            {rightIcon || <InfoIcon />}
          </TouchableComponent>
        ) : null}
      </TouchableComponent>
    );
  };

  const Separator = () => (
    <Box
      width={1}
      height={50}
      alignSelf={'center'}
      marginHorizontal={'spacing-xs'}
      backgroundColor={'gray60'}
    />
  );

  const CardGroupComponent = ({ ...propsRest }) => (
    <Box
      width={width}
      flexDirection={'row'}
      backgroundColor={'white'}
      alignItems={'flex-start'}
      justifyContent={'space-around'}
      {...propsRest}
    >
      {leftComponent && (
        <Card
          {...leftComponent}
          relativePosition={'left'}
          width={middleComponent ? '33%' : '50%'}
        />
      )}
      {middleComponent && <Separator />}
      {middleComponent && (
        <Card {...middleComponent} relativePosition={'middle'} width={'33%'} />
      )}
      <Separator />
      {rightComponent && (
        <Card
          {...rightComponent}
          relativePosition={'right'}
          width={middleComponent ? '33%' : '50%'}
        />
      )}
    </Box>
  );

  if (withCardContainer)
    return (
      <CardContainer {...props}>
        <CardGroupComponent />
      </CardContainer>
    );
  return <CardGroupComponent {...props} />;
};