import React from 'react';
import { View } from 'react-native';
import { Text } from './Text';
import { useThemeStore, useIsDark, useCurrentColors, useRootClassName } from '~/store/themeStore';
import { themes } from '~/themes';

export function ThemeDebug() {
  const { theme, mode } = useThemeStore();
  const isDark = useIsDark();
  const currentColors = useCurrentColors();
  const rootClassName = useRootClassName();

  // Fallback to default theme if currentColors is undefined
  const safeColors = currentColors || themes.default.light;

  return (
    <View className="m-2 rounded-lg border border-border bg-surface p-4">
      <Text className="mb-2 text-lg font-bold text-foreground">Theme Debug</Text>
      <Text className="text-foreground">Theme: {theme}</Text>
      <Text className="text-foreground">Mode: {mode}</Text>
      <Text className="text-foreground">Is Dark: {isDark ? 'true' : 'false'}</Text>
      <Text className="text-foreground">Root Class: {rootClassName}</Text>
      <Text className="text-foreground">Primary Color: {safeColors.primary}</Text>
      <Text className="text-foreground">Colors undefined: {currentColors ? 'no' : 'yes'}</Text>
      <View className="mt-2 rounded bg-primary p-2">
        <Text className="text-primary-foreground">Primary Background Test</Text>
      </View>
      {/* Test with inline styles */}
      <View className="mt-2 rounded p-2" style={{ backgroundColor: `rgb(${safeColors.primary})` }}>
        <Text style={{ color: `rgb(${safeColors.primaryForeground})` }}>Inline Style Test</Text>
      </View>
    </View>
  );
}