import React, { useContext } from 'react';
import { AnimationInOut } from '../AnimationInOut';
import AppContext from '../AppProvider/AppContext';
import { Button } from '../Button';
import { PageListingNotFoundImage } from '../PageListingNotFound/PageListingNotFoundImage';
import { IPageErrorProps } from './PageError.interface';
import Style from './PageError.style';
import { PageErrorImage } from './PageErrorImage';

export const PageError: React.FunctionComponent<IPageErrorProps> = ({
   image,
   fullscreen = false,
   retry,
}: IPageErrorProps) => {
   const { imagePageError } = useContext(AppContext);

   return (
      <Style data-cy="error-load" fullscreen={fullscreen}>
         <AnimationInOut>
            <div className="connection-lost" data-key="error-load">
               <div className="content">
                  <img src={image ?? imagePageError} />

                  <div className="icon pb-3">
                     {!image && !imagePageError && PageErrorImage()}
                     {(!!image || !!imagePageError) && <img src={image ?? imagePageError} width="150px" />}
                  </div>

                  <h1>Ops...</h1>

                  <h4>
                     Houve um erro ao conectar com o <b>Servidor</b>.
                     <br />
                     Verifique sua internet e tente novamente.
                  </h4>

                  <br />
                  <Button data-testid="retry-btn" onClick={retry} type="button">
                     Tentar novamente
                  </Button>
               </div>
            </div>
         </AnimationInOut>
      </Style>
   );
};
