import { Image, ImageSourcePropType, TouchableOpacity, View } from 'react-native';
import React, { ComponentType } from 'react';

import { useTheme } from './ThemeContext';
import Container from './Container';
import Icon from './Icon';

export type Props = {
  readonly actions?: JSX.Element | null;
  readonly imageSource: ImageSourcePropType;
  readonly onPressClose?: () => void;
  readonly subtitle?: JSX.Element | null;
  readonly title?: JSX.Element | null;
};
const CloseButton = ({ onPressClose, style }) => {
  return (
    <TouchableOpacity onPress={onPressClose} style={style} testID="closeButton">
      <Icon icon="cancel-outline" size={24.0} />
    </TouchableOpacity>
  );
};

const ErrorScreen: ComponentType<Props> = ({
  imageSource,
  title = null,
  subtitle = null,
  actions = null,
  onPressClose,
}: Props) => {
  const theme = useTheme();

  return (
    <Container direction="column" style={theme.errorScreen.container}>
      {onPressClose ? <CloseButton onPressClose={onPressClose} style={theme.errorScreen.closeButton} /> : null}
      <Image source={imageSource} resizeMode="contain" style={theme.errorScreen.image} />
      <View style={theme.errorScreen.titleWrapper}>{title}</View>
      <View style={theme.errorScreen.subtitleWrapper}>{subtitle}</View>
      <View style={theme.errorScreen.actionsWrapper}>{actions}</View>
    </Container>
  );
};

export default ErrorScreen;