import React from 'react'
import { EMPTY_OBJ, isNotEmpty } from 'exotic'
import { stringify } from 'chain-able-boost'

// === typings
export interface ErrorProps {
  name?: string
}

// === deps
let errorLines = 0
const toFormattedErrorLines = error => {
  const listItems = error
    .split(/((\n+)|(\.\s+))/)
    .filter(isNotEmpty)
    .map(line => (
      <li key={(errorLines += 1)}>
        <small>{line}</small>
      </li>
    ))

  // is ordered but numbers don't work well
  return <ul>{listItems}</ul>
}

// === component
class ErrorBoundary extends React.PureComponent<ErrorProps> {
  state = {
    hasError: false,
    error: undefined,
    stack: undefined,
    info: undefined,
  }

  componentDidCatch(error, info = EMPTY_OBJ) {
    const stack = stringify(error, undefined, 2)
    console.log(error, info)
    this.setState({ hasError: true, error, stack, info })
  }

  render() {
    const { name, ...remainingProps } = this.props
    const { error, hasError, stack, info } = this.state
    const debugPropsView = stringify(remainingProps, undefined, 2)

    if (hasError === true) {
      // JSON.stringify(error, null, 2)
      const errorView = error.message ? error.message : error.stack

      return (
        <article>
          <section>
            <header>
              <h1>{name} Component Error</h1>
              <h2>PLEASE CHECK YOUR DEV CONSOLE</h2>
            </header>
            <div>{toFormattedErrorLines(errorView)}</div>
            <pre>
              <code>{info.componentStack}</code>
            </pre>
            <pre>{stack}</pre>
          </section>
          <section>
            <header>
              <h3>args: </h3>
            </header>
            <pre>
              <code>{debugPropsView}</code>
            </pre>
          </section>
        </article>
      )
    }

    return this.props.children
  }
}

export { ErrorBoundary }
export default ErrorBoundary