import { render, Text, useApp } from 'ink'
import React, { ErrorInfo, useCallback } from 'react'

jest.setTimeout(2000)


class ErrorBoundary extends React.Component<{cb: (err: Error | null, errorInfo: ErrorInfo) => void}> {

  static getDerivedStateFromError(error: Error) {
    return null // https://tinyurl.com/y4k99pwr
  }
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.props.cb(error, errorInfo)
    this.setState(null) // prevents - https://github.com/reactjs/reactjs.org/issues/3028
  }
  render() {
    return this.props.children
  }
}

const MalformedComponent = () => {

  const renderSomething = () => <Text>Broken</Text>
  return (<React.Fragment key="meh">
    {renderSomething()} */} // intentional syntax error
  </React.Fragment>)
}
MalformedComponent.displayName = 'MalformedComponent'


const RenderAndExit: React.FC<{}> = () => {
  const {exit} = useApp()
  const errorBoundaryCb = useCallback(
    (err, errInfo) => {
      console.log(`errorBoundaryCb called :>> `, err, errInfo)
      exit(err)
      console.log(`errorBoundaryCb called 2 :>> `, err, errInfo)
    }
    ,
    [],
  )

  return (
    <ErrorBoundary cb={errorBoundaryCb}>
      <React.Fragment>
        <MalformedComponent />
      </React.Fragment>
    </ErrorBoundary>
  )
}

const renderWithInk = async () => {

  try {
    const {waitUntilExit} = render(<RenderAndExit />, {})
    await waitUntilExit() // hangs here (despite exit() being called). App unmount waitUntilExit is neither resolved nor rejected as expected
    console.log(`:>> not reached`);
  }
  catch (err) {
    console.log(`err :>> `, err) // not called as expected!!
  }
}

describe('render-component', () => {
  it(`app not unmounting with malformed component despite exit() being called with error`, async () => {
    await renderWithInk()
  })
})

const MalformedComponent = () => {
  useEffect(() => {
    setTimeout(() => {
      cb(new Error('cb supplied error'))
    }, 1000)
  }, [])

  return <Text>Rendered</Text>
}
MalformedComponent.displayName = 'MalformedComponent'