import React from 'react';
import { NextPage } from 'next';
import { Link as RouterLink } from '../i18n';

import { ErrorContainer } from '../styles/pages/Error.style';
import { Link } from '../styles/components/shared/Link.style';
import henry404 from '../assets/img/henry-404.png';
import henry500 from '../assets/img/henry-500.png';

interface Props {
  statusCode: number;
  namespacesRequired?: string[];
}

const MESSAGES = {
  404: 'Il semblerait que ce chemin ne mène pas à la destination escomptée…',
  500: 'Il semblerait que le satellite ne réponde plus…'
};

const Error: NextPage<Props> = ({ statusCode }) => (
  <ErrorContainer statusCode={statusCode}>
    <div>
      <div className="left">
        <img src={statusCode === 404 ? henry404 : henry500} alt="Henry" />
      </div>
      <div>
        <div>
          <h2>{(MESSAGES as any)[statusCode] || MESSAGES[500]}</h2>
          <RouterLink href="/" as="/">
            <Link button large>
              Retour
            </Link>
          </RouterLink>
        </div>
      </div>
    </div>
  </ErrorContainer>
);

Error.getInitialProps = async ({ res, err }): Promise<Props> => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode, namespacesRequired: [] };
};

export default Error;