/**
 * Custom hook for easy theme access throughout the app
 * Provides styled components and theme utilities
 */

import { useThemeContext } from "@/hooks/use-theme-context";
import { useMemo } from "react";
import { StyleSheet, TextStyle, ViewStyle } from "react-native";

export function useAppTheme() {
  const { colors, colorScheme, themeMode, setThemeMode, getColor } =
    useThemeContext();

  // Common styled components
  const styles = useMemo(
    () =>
      StyleSheet.create({
        // Container styles
        container: {
          flex: 1,
          backgroundColor: colors.background,
        } as ViewStyle,

        surface: {
          backgroundColor: colors.surface,
          borderRadius: 12,
          padding: 16,
        } as ViewStyle,

        card: {
          backgroundColor: colors.card,
          borderRadius: 12,
          padding: 16,
          shadowColor: colors.text,
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.1,
          shadowRadius: 4,
          elevation: 3,
        } as ViewStyle,

        // Button styles
        primaryButton: {
          backgroundColor: colors.primary,
          paddingVertical: 14,
          paddingHorizontal: 20,
          borderRadius: 12,
          alignItems: "center",
          justifyContent: "center",
        } as ViewStyle,

        secondaryButton: {
          backgroundColor: colors.backgroundSecondary,
          borderWidth: 1,
          borderColor: colors.border,
          paddingVertical: 14,
          paddingHorizontal: 20,
          borderRadius: 12,
          alignItems: "center",
          justifyContent: "center",
        } as ViewStyle,

        // Text styles
        primaryButtonText: {
          color: "#ffffff",
          fontSize: 16,
          fontWeight: "600",
        } as TextStyle,

        secondaryButtonText: {
          color: colors.text,
          fontSize: 16,
          fontWeight: "600",
        } as TextStyle,

        // Input styles
        textInput: {
          backgroundColor: colors.surface,
          borderWidth: 1,
          borderColor: colors.border,
          borderRadius: 8,
          paddingVertical: 12,
          paddingHorizontal: 16,
          fontSize: 16,
          color: colors.text,
        } as ViewStyle & TextStyle,

        // Separator
        separator: {
          height: 1,
          backgroundColor: colors.separator,
        } as ViewStyle,

        // Status styles
        successContainer: {
          backgroundColor: `${colors.success}20`,
          borderColor: colors.success,
          borderWidth: 1,
          borderRadius: 8,
          padding: 12,
        } as ViewStyle,

        warningContainer: {
          backgroundColor: `${colors.warning}20`,
          borderColor: colors.warning,
          borderWidth: 1,
          borderRadius: 8,
          padding: 12,
        } as ViewStyle,

        errorContainer: {
          backgroundColor: `${colors.error}20`,
          borderColor: colors.error,
          borderWidth: 1,
          borderRadius: 8,
          padding: 12,
        } as ViewStyle,
      }),
    [colors]
  );

  // Theme utilities
  const utils = useMemo(
    () => ({
      // Get opacity color
      getOpacityColor: (
        colorName: keyof typeof colors,
        opacity: number = 0.1
      ) => {
        const color = colors[colorName];
        const hex = color.replace("#", "");
        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);
        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
      },

      // Check if current theme is dark
      isDark: colorScheme === "dark",

      // Check if current theme is light
      isLight: colorScheme === "light",

      // Toggle between light and dark (ignoring system)
      toggleTheme: () => {
        const newMode = colorScheme === "dark" ? "light" : "dark";
        setThemeMode(newMode);
      },
    }),
    [colors, colorScheme, setThemeMode]
  );

  return {
    colors,
    styles,
    utils,
    colorScheme,
    themeMode,
    setThemeMode,
    getColor,
  };
}

export type AppTheme = ReturnType<typeof useAppTheme>;