import React, { ReactElement } from 'react'
import { render, RenderOptions } from '@testing-library/react-native'

const mockThemeColors = {
  bg: {
    base: '#000000',
    surface: '#1C1C1E',
    elevated: '#2C2C2E',
  },
  text: {
    primary: '#FFFFFF',
    secondary: '#8E8E93',
    tertiary: '#636366',
  },
  glass: {
    base: {
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      borderColor: 'rgba(255, 255, 255, 0.1)',
      borderWidth: 1,
    },
    elevated: {
      backgroundColor: 'rgba(255, 255, 255, 0.08)',
      borderColor: 'rgba(255, 255, 255, 0.12)',
      borderWidth: 1,
    },
    inset: {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      borderColor: 'rgba(255, 255, 255, 0.05)',
      borderWidth: 1,
    },
    tinted: {
      backgroundColor: 'rgba(255, 107, 53, 0.1)',
      borderColor: 'rgba(255, 107, 53, 0.2)',
      borderWidth: 1,
    },
    blurTint: 'dark',
    blurMedium: 40,
  },
  shadow: {
    sm: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1 },
    md: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.25, shadowRadius: 4 },
    lg: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 8 },
  },
}

interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
  theme?: typeof mockThemeColors
}

export function renderWithTheme(
  ui: ReactElement,
  options: CustomRenderOptions = {}
) {
  return render(ui, options)
}

export { mockThemeColors }
