"use strict";

const React = require("react");
const entities = require("entities");
const ansiToHtml = require("ansi-to-html");

const Layout = require("./layout");

let converter = new ansiToHtml({
	colors: {
		1: "#F33"
	}
});

module.exports = {
	template: function ErrorPage({ error }) {
		let escapedStack = converter.toHtml(entities.escape(error));
		
		let formattedStack = escapedStack
			.split("\n")
			.map((line) => {
				if (line.includes("node_modules")) {
					return `<span class="irrelevant">${line}</span>`;
				} else {
					return line;
				}
			})
			.join("\n");

		return (
			<Layout title="An error occurred">
				<div className="error">
					<h1>An error occurred.</h1>
					<h2>{ error.message }</h2>
					<div className="stacktrace" dangerouslySetInnerHTML={{ __html: formattedStack }} />
				</div>
			</Layout>
		);
	}
};