import * as React from "react"
import {ReactError} from "./ReactError";



function StringToHtml({s}: {s: string}) {
  //Expect props.children to be a string
  return React.createElement(React.Fragment, {}, 
    s.split(/\\n|\n/).map(line => React.createElement("div", {}, line))
  )
}

function ObjToHtml({o}: {o: any}) {
  const json = `${JSON.stringify(o, null, 2)}`
  //Expect props.children to be a string
  return React.createElement(React.Fragment, {}, 
    json.split(/\\n|\n/).map(line => React.createElement("div", {}, line))
  )
}

export type ErrorDisplayProps = {
  name?: string
  onErrorPrefixElement?: React.ReactElement<any>
  error: ReactError
}
export function ErrorDisplay(props: ErrorDisplayProps) {
  return React.createElement(
    "div",
    {
      className: "ErrorBoundaryError",
    },
    props.onErrorPrefixElement,
    React.createElement(
      "div",
      {},
      `Error at boundary ${props.name}`,
    ),
    React.createElement("div", {}, React.createElement(StringToHtml,{s: ""+props.error!.error})),
    React.createElement("hr"),
    React.createElement("div", {}, React.createElement(ObjToHtml, {o: props.error!.errorInfo})),
  )
}