/**
 * Creating a page named _error.js lets you override HTTP error messages
 */
import React from 'react'
import Link from 'next/link'
import { withRouter } from 'next/router'

import { withStyles } from '@material-ui/core/styles'
const styles = theme => ({
  root: {
      position: 'relative',
  },
});
class ErrorPage extends React.Component {

  static propTypes() {
    return {
      errorCode: React.PropTypes.number.isRequired,
      url: React.PropTypes.string.isRequired
    }
  }

  static getInitialProps({res, xhr}) {
    const errorCode = res ? res.statusCode : (xhr ? xhr.status : null)
    return {errorCode}
  }

  render() {
    var response
    switch (this.props.errorCode) {
      case 200: // Also display a 404 if someone requests /_error explicitly
      case 404:
        response = (
          <div>
            <div>
              <h1 >Page Not Found</h1>
              <p>La page <strong>{ this.props.url }</strong> n'existe pas.</p>
              <p><Link href="/"><a>Retour au site</a></Link></p>
            </div>
          </div>
        )
        break
      case 500:
        response = (
          <div>
            <div >
              <h1>Internal Server Error</h1>
              <p>An internal server error occurred.</p>
            </div>
          </div>
        )
        break
      default:
        response = (
          <div>
            <div >
              <h1 >HTTP { this.props.errorCode } Error</h1>
              <p>
                An <strong>HTTP { this.props.errorCode }</strong> error occurred while
                trying to access <strong>{ this.props.router.pathname }</strong>
              </p>
            </div>
          </div>
        )
    }

    return response
  }

}

export default withRouter(withStyles(styles)(ErrorPage))