import React, {PropsWithChildren} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';

import {Avatar} from '../Avatar';
import {Title} from '../Title';
import {Button} from '../Button';
import {StateCardVariant} from './interfaces';
import {CardContainer} from '../CardContainer';
import {getAvatarPropsByVariant, styles} from './styles';

export interface StateCardProps extends PropsWithChildren {
  variant: StateCardVariant;
  title: string;
  description?: string;
  titleNumberOfLines?: number;
  descriptionNumberOfLines?: number;
  style?: StyleProp<ViewStyle>;
}

export function StateCard({
  variant = 'empty',
  title,
  description,
  children,
  titleNumberOfLines = 2,
  descriptionNumberOfLines = 3,
  style,
}: StateCardProps) {
  const avatarProps = getAvatarPropsByVariant(variant);

  return (
    <CardContainer style={[styles.container, style]}>
      <Avatar size="md" {...avatarProps} />
      <Title
        title={title}
        description={description}
        center
        titleNumberOfLines={titleNumberOfLines}
        descriptionNumberOfLines={descriptionNumberOfLines}
      />
      {children}
    </CardContainer>
  );
}

StateCard.Footer = function StateCardFooter({children}: PropsWithChildren) {
  return <View style={styles.footer}>{children}</View>;
};

interface StateCardButtonProps {
  variant: 'secondary' | 'tertiary';
  text: string;
  onPress: () => void;
  isLoading?: boolean;
}

StateCard.Button = function StateCardButton({
  variant,
  text,
  onPress,
  isLoading = false,
}: StateCardButtonProps) {
  return (
    <Button
      variant={variant}
      text={text}
      onPress={onPress}
      size="sm"
      isLoading={isLoading}
    />
  );
};