import React from 'react'
import ansiHTML from 'ansi-html'
import Head from './head'

export default ({ error, error: { name, message, module } }) => (
  <div style={styles.errorDebug}>
    <Head>
      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    </Head>
    {module ? <div style={styles.heading}>Error in {module.rawRequest}</div> : null}
    {
      name === 'ModuleBuildError'
      ? <pre style={styles.stack} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
      : <StackTrace error={error} />
    }
  </div>
)

const StackTrace = ({ error: { name, message, stack } }) => (
  <div>
    <div style={styles.heading}>{message || name}</div>
    <pre style={styles.stack}>
      {stack}
    </pre>
  </div>
)

const styles = {
  errorDebug: {
    background: '#a6004c',
    boxSizing: 'border-box',
    overflow: 'auto',
    padding: '15px',
    position: 'fixed',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    zIndex: 9999
  },

  stack: {
    fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", consolas, menlo-regular, monospace',
    fontSize: '13px',
    color: '#fbe7f1',
    margin: 0,
    whiteSpace: 'pre-wrap',
    wordWrap: 'break-word',
    marginTop: '20px'
  },

  heading: {
    fontFamily: '-apple-system, system-ui, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
    fontSize: '15px',
    fontWeight: 'bold',
    color: '#febfdd',
    marginBottom: '5px'
  }
}

const encodeHtml = str => {
  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
}

// see color definitions of babel-code-frame:
// https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js

ansiHTML.setColors({
  reset: ['fff', 'a6004c'],
  darkgrey: 'e54590',
  yellow: 'ee8cbb',
  green: 'f2a2c7',
  magenta: 'fbe7f1',
  blue: 'fff',
  cyan: 'ef8bb9',
  red: 'fff'
})

@@ -296,19 +296,18 @@
 dule ? %3C
-div
+h1
  style=%7B
@@ -352,19 +352,18 @@
 quest%7D%3C/
-div
+h1
 %3E : null
@@ -809,22 +809,22 @@
 ound: '#
-a6004c
+0e0d0d
 ',%0A    b
@@ -883,18 +883,18 @@
 dding: '
-15
+24
 px',%0A   
@@ -1112,24 +1112,48 @@
 ze: '13px',%0A
+    lineHeight: '18px',%0A
     color: '
@@ -1153,22 +1153,22 @@
 olor: '#
-fbe7f1
+b3adac
 ',%0A    m
@@ -1253,10 +1253,10 @@
 p: '
-20
+16
 px'%0A
@@ -1445,10 +1445,10 @@
 e: '
-15
+20
 px',
@@ -1469,12 +1469,35 @@
 t: '
-bold
+400',%0A    lineHeight: '28px
 ',%0A 
@@ -1513,13 +1513,10 @@
  '#f
-ebfdd
+ff
 ',%0A 
@@ -1533,17 +1533,39 @@
 ottom: '
-5
+0px',%0A    marginTop: '0
 px'%0A  %7D%0A
@@ -1823,21 +1823,24 @@
 : %5B'
-fff', 'a6004c
+6F6767', '0e0d0d
 '%5D,%0A
@@ -1856,14 +1856,14 @@
 y: '
-e54590
+6F6767
 ',%0A 
@@ -1876,14 +1876,14 @@
 w: '
-ee8cbb
+6F6767
 ',%0A 
@@ -1895,14 +1895,14 @@
 n: '
-f2a2c7
+ebe7e5
 ',%0A 
@@ -1916,14 +1916,14 @@
 a: '
-fbe7f1
+ebe7e5
 ',%0A 
@@ -1930,19 +1930,22 @@
  blue: '
-fff
+ebe7e5
 ',%0A  cya
@@ -1953,13 +1953,13 @@
 : 'e
-f8bb9
+be7e5
 ',%0A 
@@ -1967,14 +1967,17 @@
 red: 'ff
+001
 f'%0A%7D)%0A

Update debug error colors (#2182)