import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { renderHook } from '@testing-library/react-native'
import React from 'react'
import { buildTestQueryClient } from '../../__utils__/query_client'
import { ChatProvider, CreateChatThemeProps } from '../../contexts/chat_context'
import { useTheme } from '../../hooks'

let themeProps: CreateChatThemeProps = {
  theme: {
    colors: {},
  },
  colorScheme: 'light',
}

let queryClient: QueryClient

beforeEach(() => {
  queryClient = buildTestQueryClient({
    defaultOptions: {
      queries: {
        refetchInterval: false,
        refetchOnWindowFocus: false,
        refetchOnReconnect: false,
      },
    },
  })
})

afterEach(() => {
  queryClient.clear()
  queryClient.cancelQueries()
  queryClient.removeQueries()
})

const Wrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <ChatProvider
        value={{
          token: {
            access_token: '',
            created_at: 0,
            expires_in: 0,
            scope: '',
            refresh_token: '',
            token_type: '',
          },
          onUnauthorizedResponse: () => {},
          theme: themeProps,
        }}
      >
        {children}
      </ChatProvider>
    </QueryClientProvider>
  )
}

test('should use theme', () => {
  themeProps = {}
  const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })

  expect(result.current).toBeDefined()
})

describe('configurable theme', () => {
  test('should not error is theme is undefined', () => {
    //@ts-expect-error
    themeProps = undefined
    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })

    expect(result.current).toBeDefined()
    expect(result.current.colors.testColor).toBe('hotpink')
    expect(result.current.colors.interaction).toBeDefined()
    expect(result.current.colors.buttonStart).toBeUndefined()
    expect(result.current.colors.buttonEnd).toBeUndefined()
  })

  test('should deliver custom stuffs', () => {
    themeProps = {
      theme: {
        colors: {
          testColor: 'fuscia',
          buttonStart: 'blue',
          buttonEnd: 'red',
        },
      },
      colorScheme: 'dark',
    }
    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })

    expect(result.current.colors.testColor).toBe('fuscia')
    expect(result.current.colors.buttonStart).toBe('blue')
    expect(result.current.colors.buttonEnd).toBe('red')
  })
})