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

let themeProps: CreateChatThemeProps
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>
  )
}

const renderToggleButton = (active: boolean) => {
  const view = render(<ToggleButton active={active} accessibilityLabel="Filter" title="Filter" />, {
    wrapper: Wrapper,
  })

  return {
    button: view.getByLabelText('Filter'),
    text: view.getByText('Filter'),
  }
}

describe('ToggleButton chip colors', () => {
  describe('backward compatibility (Services / sandbox pass only colors.interaction)', () => {
    const distinctiveGreen = 'rgb(0, 255, 0)'

    beforeEach(() => {
      themeProps = {
        theme: {
          colors: {
            interaction: distinctiveGreen,
          },
        },
      }
    })

    test('active state derives border, fill, and text color from colors.interaction', () => {
      const { button, text } = renderToggleButton(true)

      expect(button).toHaveStyle({ borderColor: distinctiveGreen })
      // The active fill is the green interaction color lightened via the
      // chip-background hook (hsl lightness 92 in the light scheme), not
      // the raw interaction color — pins the hook's transform in place.
      expect(button).toHaveStyle({ backgroundColor: 'hsl(120, 100%, 92%)' })
      expect(text).toHaveStyle({ color: distinctiveGreen })
    })

    test.each([
      ['light', undefined, 'hsl(0, 0%, 88%)', 'hsl(0, 0%, 45%)'],
      ['dark', 'dark' as const, 'hsl(0, 0%, 24%)', 'hsl(0, 0%, 68%)'],
    ])(
      'inactive state uses the static chip defaults in the %s scheme',
      (_label, colorScheme, borderColor, color) => {
        themeProps = {
          theme: { colors: { interaction: distinctiveGreen } },
          colorScheme,
        }

        const { button, text } = renderToggleButton(false)

        expect(button).toHaveStyle({ borderColor })
        expect(text).toHaveStyle({ color })
      }
    )
  })

  describe('explicit chip token overrides', () => {
    const explicitBorder = 'rgb(1, 2, 3)'
    const explicitFill = 'rgb(4, 5, 6)'
    const explicitText = 'rgb(7, 8, 9)'

    beforeEach(() => {
      themeProps = {
        theme: {
          colors: {
            interaction: 'rgb(0, 255, 0)',
            borderColorChipSelected: explicitBorder,
            fillColorChipSelected: explicitFill,
            textColorChipSelected: explicitText,
          },
        },
      }
    })

    test('active state prefers explicit chip tokens over colors.interaction', () => {
      const { button, text } = renderToggleButton(true)

      expect(button).toHaveStyle({ borderColor: explicitBorder })
      // fillColorChipSelected still passes through the chip-background hook's
      // lightness transform, so the rendered fill isn't the raw override.
      expect(button).toHaveStyle({ backgroundColor: 'hsl(210, 20%, 92%)' })
      expect(text).toHaveStyle({ color: explicitText })
    })
  })
})