import React, { useContext } from 'react';
import AppContext from '../../AppProvider/AppContext';
import { Button } from '../../Button/native';
import { RSValue } from '../../RFValue';
import {
   ContainerScroll,
   Container,
   Image,
   TextTitle,
   TextP,
   TextPBold,
   RetryBtn,
   RetryTextBtn,
} from './PageListingError.style';

export interface IPropsPageErrorLoad extends React.ComponentProps<any> {
   image?: any;
   nonFullscreen?: boolean;
   retry: () => void;
}

export const PageErrorLoad: React.FunctionComponent<IPropsPageErrorLoad> = ({
   image,
   nonFullscreen = false,
   retry,
}: IPropsPageErrorLoad) => {
   const { imagePageError } = useContext(AppContext);

   return (
      <Container>
         {(image || imagePageError) && (
            <Image
               source={image ?? imagePageError}
               style={{
                  width: RSValue(200),
                  height: RSValue(200),
                  resizeMode: 'contain',
               }}
            />
         )}

         <TextP>
            Houve um erro ao conectar com o <TextPBold bold>Servidor</TextPBold>. Verifique sua internet e tente
            novamente.
         </TextP>

         <Button onPress={retry} testID="retry-btn">
            Tentar novamente
         </Button>
      </Container>
   );
};
