import { NavigationContainer } from '@react-navigation/native'
import { QueryClientProvider } from '@tanstack/react-query'
import { render } from '@testing-library/react-native'
import React from 'react'
import { buildTestQueryClient } from '../../../__utils__/query_client'
import { Log } from '../../../utils/native_adapters/configuration'
import { PageErrorBoundary } from '../page_error_boundary'

jest.mock('../../primitive/blank_state_primitive', () => {
  const { Text } = require('react-native')
  const { createElement } = require('react')
  const passthrough = ({ children }: { children?: unknown }) => children
  const asText = ({ children }: { children?: unknown }) => createElement(Text, null, children)
  const empty = () => null
  return {
    __esModule: true,
    default: {
      Root: passthrough,
      Imagery: empty,
      Content: passthrough,
      Heading: asText,
      Text: asText,
      Button: empty,
      TextButton: asText,
    },
  }
})

function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
  throw thrown
}

const renderWithProviders = (ui: React.ReactElement) =>
  render(
    <QueryClientProvider client={buildTestQueryClient()}>
      <NavigationContainer>{ui}</NavigationContainer>
    </QueryClientProvider>
  )

describe('PageErrorBoundary', () => {
  let reportError: jest.SpyInstance
  let consoleError: jest.SpyInstance

  beforeEach(() => {
    reportError = jest.spyOn(Log, 'reportError').mockImplementation(() => {})
    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
  })

  afterEach(() => {
    reportError.mockRestore()
    consoleError.mockRestore()
  })

  it('defaults the reporter scope to "screen"', () => {
    renderWithProviders(
      <PageErrorBoundary screenName="ConversationScreen">
        <Boom thrown={new Error('boom')} />
      </PageErrorBoundary>
    )

    expect(reportError.mock.calls[0][1]).toMatchObject({
      scope: 'screen',
      screenName: 'ConversationScreen',
    })
  })

  it('renders the full Oops fallback when no fallback is provided', () => {
    const { getByText } = renderWithProviders(
      <PageErrorBoundary>
        <Boom thrown={new Error('boom')} />
      </PageErrorBoundary>
    )

    expect(getByText('Oops!')).toBeTruthy()
    expect(getByText('Something unexpected happened.')).toBeTruthy()
  })
})