import React from 'react';
import {View} from 'react-native';
import {Image, Pressable} from '@components/_core';
import {useTheme} from '@shared/theme';

import {BadgeCardContainer} from './components/Badge';
import {Footer} from './components/Footer';
import {CardContainerProps, PressableCardContainerProps} from './interfaces';
import {styles} from './styles';
import {useShadowStyles} from '../globalStyles';

export function CardContainer({
  children,
  elevation,
  badge,
  footer,
  style,
  onLayout,
  imageUrl,
}: CardContainerProps) {
  const {theme} = useTheme();
  const shadowStyles = useShadowStyles();
  const elevationStyle = {...shadowStyles, borderWidth: 0};

  return (
    <>
      <View
        style={[
          styles.container,
          {
            backgroundColor: theme.background.elements.default,
            borderColor: theme.border.neutral.default,
          },
          elevation && elevationStyle,
          (badge || footer) && styles.noRadius,
          style,
        ]}
        onLayout={onLayout}>
        {!!imageUrl && (
          <View style={styles.imageContainer}>
            <Image source={imageUrl} style={styles.image} />
          </View>
        )}
        {children}
      </View>
      {!!footer && (
        <Footer
          primaryText={footer.primaryText}
          primaryVariant={footer.primaryVariant}
          onPrimaryPress={footer.onPrimaryPress}
          primaryButtonContainerStyle={footer.primaryButtonContainerStyle}
          secondaryText={footer.secondaryText}
          onSecondaryPress={footer.onSecondaryPress}
          containerStyle={[
            badge && styles.noRadius,
            elevation && elevationStyle,
            styles.borderTop,
          ]}
        />
      )}
      {badge && (
        <BadgeCardContainer
          elevationStyle={elevation && elevationStyle}
          {...badge}
        />
      )}
    </>
  );
}

export function PressableCardContainer({
  children,
  onPress,
  backgroundColor,
  disabled,
  accessibilityLabel,
  ...props
}: PressableCardContainerProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      backgroundColor={backgroundColor}
      style={styles.pressable}
      accessibilityLabel={accessibilityLabel}>
      <CardContainer {...props}>{children}</CardContainer>
    </Pressable>
  );
}

export * from './interfaces';