import type { ReactElement } from 'react';
import React from 'react';
import type {
  ImageProps as RNImageProps,
  StyleProp,
  ViewStyle,
} from 'react-native';

import type { ImageProps } from '../../Image';
import type { IllustrationName } from '../../Illustration';
import Illustration from '../../Illustration';
import {
  StyledDescription,
  StyledEmptyImageContainer,
  StyledTitle,
  StyledWrapper,
} from './StyledEmpty';

interface EmptyProps {
  /**
   * Image to be displayed.
   * @deprecated The `image` prop is deprecated and will be removed in the next major version. Use the `icon` prop instead.
   */
  image?: ReactElement<ImageProps | RNImageProps>;
  /**
   * Empty's title.
   */
  title: string | ReactElement;
  /**
   * Empty's description.
   */
  description?: string;
  /**
   * Empty's variant.
   * @deprecated The `variant` prop is deprecated and will be removed in the next major version. Only light mode will be supported.
   */
  variant?: 'light' | 'dark';
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Status icon to be displayed, this will replace the deprecated image prop.
   */
  icon?: IllustrationName;
}

const renderImageOrIcon = ({
  image,
  icon,
}: {
  image?: ReactElement<ImageProps | RNImageProps>;
  icon?: IllustrationName;
}) => {
  if (icon) {
    return (
      <StyledEmptyImageContainer>
        <Illustration name={icon} testID="empty-icon" />
      </StyledEmptyImageContainer>
    );
  }

  if (image) {
    return (
      <StyledEmptyImageContainer testID="empty-image">
        {image}
      </StyledEmptyImageContainer>
    );
  }

  return null;
};

const Empty = ({
  image,
  title,
  description,
  style,
  testID,
  variant = 'light',
  icon,
}: EmptyProps): ReactElement => (
  <StyledWrapper style={style} testID={testID}>
    {renderImageOrIcon({ image, icon })}
    {typeof title === 'string' ? (
      <StyledTitle themeVariant={variant} level="h4" typeface="playful">
        {title}
      </StyledTitle>
    ) : (
      title
    )}
    {!!description && (
      <StyledDescription variant="small" themeVariant={variant}>
        {description}
      </StyledDescription>
    )}
  </StyledWrapper>
);

export default Empty;