import React from "react";

import { FormattedMessage, defineMessages, injectIntl, intlShape } from "react-intl";

import PropTypes from "prop-types";

import history from "../../core/history";

import Link from "../../components/Link/Link";

import s from "./styles.css";

const messages = defineMessages({

  errorMessage: {

    defaultMessage: "Error",

  },

  pageNotFoundMessage: {

    defaultMessage: "Page Not Found",

  },

  pageNotFoundTitle: {

    defaultMessage: "Page not found",

  },

  oupsTitle: {

    defaultMessage: "Oups, something went wrong",

  },

});

class ErrorPage extends React.Component {

  constructor() {

    super();

    this.goBack = this.goBack.bind(this);

  }

  componentDidMount() {

    const { formatMessage } = this.props.intl;

    document.title =

      this.props.error && this.props.error.status === 404

        ? formatMessage(messages.pageNotFoundMessage)

        : formatMessage(messages.errorMessage);

  }

  goBack(event) {

    event.preventDefault();

    history.goBack();

  }

  render() {

    const { formatMessage } = this.props.intl;

    if (this.props.error) console.error(this.props.error); // eslint-disable-line no-console

    const [code, title] =

      this.props.error && this.props.error.status === 404

        ? ["404", formatMessage(messages.pageNotFoundTitle)]

        : ["Error", formatMessage(messages.oupsTitle)];

    return (

        <main className={s.content}>

          
{code}

          
{title}

          {code === "404" && (

              <FormattedMessage defaultMessage="The page you're looking for does not exist or an another error occurred." />

          )}

              defaultMessage="{goBack}, or head over to the {homePage} to choose a new direction."

              values={{

                goBack: (

                    <FormattedMessage defaultMessage="Go back" />

                ),

                homePage: (

                  <Link to="/">

                    <FormattedMessage defaultMessage="home page" />

                  </Link>

                ),

              }}

            />

        </main>

    );

  }

}

ErrorPage.propTypes = {

  error: PropTypes.shape({

    status: PropTypes.number,

  }),

  intl: intlShape.isRequired,

};

ErrorPage.defaultProps = {

  error: {},

};

export default injectIntl(ErrorPage);