import { HeaderHeightContext } from '@react-navigation/elements'
import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { QueryClientProvider, notifyManager } from '@tanstack/react-query'
import { act, fireEvent, render, screen } from '@testing-library/react-native'
import React from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { chatQueryClient } from '../../contexts/api_provider'
import { SendGiphyScreen, SendGiphyScreenProps } from '../../screens/send_giphy_screen'

jest.mock('../../contexts/api_provider', () => {
  const { buildTestQueryClient } = require('../../__utils__/query_client')
  return { chatQueryClient: buildTestQueryClient() }
})

const mockPost = jest.fn()
jest.mock('../../hooks/use_api_client', () => ({
  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
}))

jest.mock('../../hooks/use_current_person', () => ({
  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
}))

jest.mock('../../hooks/use_giphy', () => ({
  useGiphy: () => ({
    isSearching: false,
    result: { type: 'giphy', title: 'cat', giphy: { fixed_width: { url: 'https://gif' } } },
    nextResult: jest.fn(),
    prevResult: jest.fn(),
  }),
}))

const mockDispatch = jest.fn()
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({
    dispatch: mockDispatch,
    goBack: jest.fn(),
    getState: () => ({
      routes: [
        { name: 'Conversation', params: { conversation_id: 7 } },
        { name: 'ConversationReply', params: { conversation_id: 7, reply_root_id: '42' } },
        { name: 'SendGiphy' },
      ],
    }),
  }),
}))

notifyManager.setNotifyFunction(fn => act(fn))

const safeAreaMetrics = {
  frame: { x: 0, y: 0, width: 390, height: 844 },
  insets: { top: 0, right: 0, bottom: 0, left: 0 },
}

describe('SendGiphyScreen', () => {
  let finishSend: (value: unknown) => void

  beforeEach(() => {
    chatQueryClient.clear()
    mockDispatch.mockReset()
    mockPost.mockReset().mockReturnValue(new Promise(resolve => (finishSend = resolve)))
  })

  afterEach(async () => {
    await act(async () => finishSend({ data: { type: 'Message', id: 'sent', mine: true } }))
  })

  it('sends from a reply thread as a reply and returns to the thread', async () => {
    const route = {
      params: { conversation_id: 7, reply_root_id: '42', search_term: 'cat' },
    } as unknown as SendGiphyScreenProps['route']

    render(
      <QueryClientProvider client={chatQueryClient}>
        <SafeAreaProvider initialMetrics={safeAreaMetrics}>
          <ThemeProvider value={DefaultTheme}>
            <HeaderHeightContext.Provider value={0}>
              <SendGiphyScreen route={route} />
            </HeaderHeightContext.Provider>
          </ThemeProvider>
        </SafeAreaProvider>
      </QueryClientProvider>
    )

    await act(async () => {
      fireEvent.press(screen.getByLabelText('Send Giphy'))
    })

    const [{ data }] = mockPost.mock.calls[0]
    expect(data.data.attributes.reply_root).toEqual({ id: '42' })
    expect(mockDispatch).toHaveBeenCalledWith(
      expect.objectContaining({
        type: 'POP_TO',
        payload: expect.objectContaining({
          name: 'ConversationReply',
          params: expect.objectContaining({ reply_root_id: '42', clear_input: true }),
        }),
      })
    )
  })
})