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 { chatQueryClient } from '../../../contexts/api_provider'
import type { ConversationResource } from '../../../types'
import { MessageForm } from '../message_form'

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_message_draft', () => ({
  useMessageDraft: () => ({ draft: null, saveDraft: jest.fn(), clearDraft: jest.fn() }),
}))

jest.mock('../../../hooks/use_attachment_uploader', () => ({
  useAttachmentUploader: () => ({
    attachments: [],
    attachmentIds: [],
    pendingUploads: false,
    flaggedAttachmentCount: 0,
    reset: jest.fn(),
  }),
}))

jest.mock('../../../hooks/use_broadcast_typing_status', () => ({
  useBroadcastTypingStatus: () => jest.fn(),
}))

jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({ navigate: jest.fn(), setParams: jest.fn() }),
  useRoute: () => ({ params: { conversation_id: 7 } }),
}))

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

const conversation = { id: 7, disabled: false } as unknown as ConversationResource

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

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

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

  it('keeps the input editable while a sent message is in flight', async () => {
    render(
      <QueryClientProvider client={chatQueryClient}>
        <ThemeProvider value={DefaultTheme}>
          <MessageForm.Root conversation={conversation}>
            <MessageForm.TextInput />
            <MessageForm.SubmitButton />
          </MessageForm.Root>
        </ThemeProvider>
      </QueryClientProvider>
    )

    fireEvent.changeText(screen.getByTestId('message-composer-input'), 'hello')
    await act(async () => {
      fireEvent.press(screen.getByLabelText('Send message'))
    })

    expect(mockPost).toHaveBeenCalled()
    expect(screen.getByTestId('message-composer-input').props.editable).toBe(true)
  })
})