import React from 'react'
import PropTypes from 'prop-types'

import withI18n from '../components/hoc/with-i18n'

import Page from '../components/page'
import Meta from '../components/meta'
import Content from '../components/content'

class ErrorPage extends React.Component {
  static propTypes = {
    statusCode: PropTypes.number.isRequired,
    i18n: PropTypes.shape({
      exists: PropTypes.func.isRequired
    }).isRequired,
    t: PropTypes.func.isRequired
  }

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

  render() {
    const { statusCode, i18n, t } = this.props

    const message = i18n.exists(`errors.${statusCode}`) ? t(`errors.${statusCode}`) : t('errors.unknown')

    return (
      <Page>
        <Meta title={t('errors.title', { code: statusCode })} description={message} />

        <Content clouds>
          <div>
            {statusCode ? <h1>{statusCode}</h1> : null}
            <h2>{message}</h2>
          </div>
        </Content>

        <style jsx>{`
          div {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            margin: 7em 0 2em;
          }

          h1 {
            border-right: 1px solid rgba(0, 0, 0,.3);
            margin: 0 20px 0 0;
            padding: 10px 20px 10px 0;
            font-size: 24px;
            fontWeight: 500;
          }

          h2 {
            margin: 0;
            font-size: 14px;
            font-weight: normal;
          }
        `}</style>
      </Page>
    )
  }
}

export default withI18n()(ErrorPage)

@@ -297,23 +297,17 @@
 = %7B%0A    
-statusC
+c
 ode: Pro
@@ -319,27 +319,16 @@
 s.number
-.isRequired
 ,%0A    i1
@@ -498,23 +498,17 @@
   const 
-statusC
+c
 ode = re
@@ -558,16 +558,17 @@
 : null)%0A
+%0A
     retu
@@ -572,23 +572,17 @@
 eturn %7B 
-statusC
+c
 ode %7D%0A  
@@ -609,23 +609,17 @@
 const %7B 
-statusC
+c
 ode, i18
@@ -677,31 +677,25 @@
 s(%60errors.$%7B
-statusC
+c
 ode%7D%60) ? t(%60
@@ -703,23 +703,17 @@
 rrors.$%7B
-statusC
+c
 ode%7D%60) :
@@ -809,20 +809,8 @@
 code
-: statusCode
  %7D)%7D
@@ -893,51 +893,46 @@
     
-%7BstatusCode ? %3Ch1%3E%7BstatusCode%7D%3C/h1%3E : null%7D
+%3Ch1%3E%7Bt('errors.title', %7B code %7D)%7D%3C/h1%3E
 %0A   

Add error label to error page