import React from 'react';
import type { ReactElement } from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import {
  StyledContainer,
  StyledContentContainer,
  StyledCTAWrapper,
  StyledTextContainer,
} from './StyledAttachment';
import type { IconProps } from '../Icon';
import Icon from '../Icon';
import Typography from '../Typography';
import type { ImageProps } from '../Image';

interface AttachmentProps {
  /**
   * Attachment filename.
   */
  filename?: string;
  /**
   * Attachment preview element.
   */
  previewElement: ReactElement<ImageProps | IconProps>;
  /**
   * Removing callback. When onRemove is available, a trash icon will be rendered on the right side. The callback will be called when user clicks on trash icon.
   */
  onRemove?: () => void;
  /**
   * Downloading callback. When onDownload is available, a download icon will be rendered on the right side. The callback will be called when user clicks on download icon.
   */
  onDownload?: () => void;
  /**
   * The background of the attachment's content will be highlighted if backgroundHighlighted is true.
   * Default value is false.
   */
  backgroundHighlighted?: boolean;
  /**
   * Addtional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
}

const Attachment = ({
  filename,
  previewElement,
  onRemove,
  onDownload,
  backgroundHighlighted = false,
  style,
  testID,
}: AttachmentProps) => (
  <StyledContainer testID={testID} style={style}>
    <StyledContentContainer themeHighlighted={backgroundHighlighted}>
      {previewElement}
      {filename ? (
        <StyledTextContainer testID="attachment-content">
          <Typography.Body variant="small" numberOfLines={1}>
            {filename}
          </Typography.Body>
        </StyledTextContainer>
      ) : null}
    </StyledContentContainer>
    {onDownload ? (
      <StyledCTAWrapper onPress={onDownload} testID="attachment-download-icon">
        <Icon icon="download-outlined" size="small" />
      </StyledCTAWrapper>
    ) : null}
    {onRemove ? (
      <StyledCTAWrapper onPress={onRemove} testID="attachment-remove-icon">
        <Icon icon="trash-bin-outlined" size="small" intent="danger" />
      </StyledCTAWrapper>
    ) : null}
  </StyledContainer>
);

export default Attachment;