import React, { createContext, useContext, useState, useEffect } from 'react';
import { useColorScheme, StatusBar } from 'react-native';
import useThemeColors from './themeColors';
import AsyncStorage from '@react-native-async-storage/async-storage';

export interface ColorsScheme {
  black: string | undefined;
  surface_cool: string;
  border_cool: string;
  text_cool: string;
  bg_primary: string;
  bg_secondary: string;
  bg_tertiary: string;
  text_primary: string;
  text_secondary: string;
  text_tertiary: string;
  text_disabled: string;
  border_light: string;
  border_medium: string;
  border_strong: string;
  border_focus: string;
  button_primary: string;
  button_hover: string;
  button_pressed: string;
  button_disabled: string;
  status_success: string;
  status_error: string;
  status_warning: string;
  surface_elevated: string;
  surface_overlay: string;
  shadow_color: string;
  inverse: string;
  bg_light: string;
  logo_grad_top: string;
  overlay_modal: string;
  gradient_first: string;
  gradient_second: string;
  modal_primary: string;
  modal_secondary: string;
  modal_title: string;
  red: string;
  blue: string;
  white: string;
  //------NEW COLOR------
  fill_primary: string;
  fill_secondary: string;
  fill_secondary_b: string;
  fill_secondary_alt: string;
  fill_tertiary: string;
  fill_tertiary_alt: string;
  fill_quaternary: string;
  fill_quaternary_alt: string;
  figure_gray: string;
  border_primary: string;
  border_secondary: string;
  card_background: string;
  figure_secondary: string;
  figure_tertiary: string;
  figure_quaternary: string;
  primary_white: string;
  soft_red: string;
  soft_green: string;
  soft_blue: string;
  primary_black: string;
  primary_red: string;
  primary_green: string;
  primary_blue: string;
  primary_orange: string;
  accents_purple: string;
  accents_pink: string;
  accents_teal: string;
  primary_accent: string;
  primary_accent_2: string;
  primary_accent_blue: string;
  blue_50: string;
  blue_300: string;
  border_tertiary: string;
  primary_accent_blue_create: string;
  fill_primary_40: string;
  fill_secondary_t: string;
  fill_tertiary_t: string;
  fill_quaternary_t: string;
  fill_surface: string;
  fill_message_bubble: string;
  fill_message_bubble_accent: string;
  fill_message_bubble_40: string;
  fill_attachment: string;
  fill_reaction: string;
  figure_black: string;
  figure_secondary_alpha: string;
  figure_link: string;
  border_10: string;
  card_background_active: string;
  primary_red_10: string;
  primary_red_20: string;
  primary_red_30: string;
  primary_red_60: string;
  primary_red_80: string;
  primary_green_10: string;
  primary_green_20: string;
  primary_green_30: string;
  primary_green_60: string;
  primary_green_80: string;
  primary_orange_10: string;
  primary_orange_20: string;
  primary_orange_30: string;
  primary_orange_50: string;
  primary_orange_80: string;
  primary_yellow: string;
  primary_yellow_30: string;
  primary_yellow_80: string;
  primary_accent_dark: string;
  primary_accent_semi: string;
  primary_accent_blue_5: string;
  primary_accent_blue_15: string;
  primary_accent_blue_30: string;
  primary_accent_blue_60: string;
  primary_accent_blue_80: string;
  primary_accent_sky: string;

  // NEW COLORS
  // labels
  labels_primary: string;
  labels_secondary: string;
  labels_tertiary: string;
  labels_quaternary: string;
  labels_primary_inv: string;
  labels_vibrant_primary: string;
  labels_vibrant_secondary: string;
  labels_vibrant_tertiary: string;
  labels_vibrant_quaternary: string;

  // fills
  fills_primary: string;
  fills_secondary: string;
  fills_tertiary: string;
  fills_quaternary: string;
  fills_quinary: string;
  fills_vprimary: string;
  fills_white80: string;
  fills_white60: string;
  fills_white40: string;
  fills_white75: string;
  fills_white76: string;
  fills_black3: string;
  fills_black5: string;
  fills_black8: string;
  fills_black12: string;
  fills_black13: string;
  fills_black15: string;
  fills_black20: string;
  fills_black30: string;
  fills_black50: string;
  fills_black80: string;
  fills_black81: string;
  fills_solid_primary: string;
  fills_solid_secondary: string;
  fills_solid_tertiary: string;
  fills_vibrant_primary: string;
  fills_vibrant_secondary: string;
  fills_vibrant_tertiary: string;

  // System Background
  system_background_primary: string;
  system_background_secondary: string;
  system_background_tertiary: string;
  system_background_elevated_primary: string;
  system_background_elevated_secondary: string;
  system_background_elevated_tertiary: string;

  // backgrounds
  background_primary: string;
  background_secondary: string;
  background_tertiary: string;
  background_thick: string;
  background_primary_elevated: string;
  background_secondary_elevated: string;
  background_tertiary_elevated: string;

  // backgrounds (grouped)
  background_grouped_primary: string;
  background_grouped_secondary: string;
  background_grouped_tertiary: string;
  background_grouped_primary_elevated: string;
  background_grouped_secondary_elevated: string;
  background_grouped_tertiary_elevated: string;

  // Background Control
  background_control_primary: string;
  background_control_secondary: string;
  background_control_tertiary: string;

  // separators
  separator_opaque: string;
  separator_non_opaque: string;
  separator_vibrant: string;

  // overlays
  overlay_default: string;
  overlay_activity: string;
  overlay_activity_view_controller: string;
  overlay_attachment: string;
  overlay_light: string;

  // grays
  gray_black: string;
  gray_white: string;
  gray: string;
  gray_2: string;
  gray_7: string;
  gray_3: string;
  gray_4: string;
  gray_5: string;
  gray_6: string;

  // colors
  colors_red: string;
  colors_orange: string;
  colors_yellow: string;
  colors_green: string;
  colors_mint: string;
  colors_teal: string;
  colors_cyan: string;
  colors_blue: string;
  colors_blue_secondary: string;
  colors_blue_tertiary: string;
  colors_blue_quaternary: string;
  colors_blue2: string;
  colors_indigo: string;
  colors_purple: string;
  colors_pink: string;
  colors_brown: string;
  colors_red_2: string;

  // border
  border_10_color: string;
  border_30_color: string;

  // misc
  alert_menu: string;
  bar_border: string;
  button_disabled_color: string;
  button_tinted_fill: string;
  button_tinted_fill2: string;
  button_destructive_label_disabled: string;
  button_destructive_bg_prominent: string;
  button_destructive_bg: string;
  floatingTab_text_selected: string;
  floatingTab_text_unselected: string;
  floatingTab_pill_shadow: string;
  floatingTab_pill_fill: string;
  keyboard_accessory_bar_selection: string;
  keyboard_emoji_mic: string;
  button_label_disabled: string;
  button_prominent: string;
  button_bg: string;
  button_bg_colors: string;
  tab_text_selected: string;
  tab_text_unselected: string;
  tab_pill_shadow: string;
  tab_pill_fill: string;
  menu_large_separator: string;
  sidebar_fill_selected: string;
  sidebar_text_selected: string;
  sidebar_shadow_drag_over: string;
  tab_unselected: string;
  text_field_bg: string;
  text_field_outline: string;
  kit_section_fill: string;
  kit_section_stroke: string;
  bubble_accent: string;
  bubble_gray: string;
  link: string;
  read_receipt: string;
  pill_active_text: string;
  pill_bg: string;
  keyboard_accessory_bar_selection2: string;
  overlay_comment_modal: string;

  // Labels Control
  labels_control_primary: string;
  labels_control_secondary: string;
  labels_control_tertiary: string;
  labels_control_quaternary: string;

  // Material
  material_ultra_thick: string;
  material_thick: string;
  material_thin: string;
  material_medium: string;
  material_ultra_thin: string;
  material_chrome: string;
}

export const ThemeColors = createContext<{
  colors: ColorsScheme;
  colorScheme: 'light' | 'dark';
  toggleTheme: () => void;
  setSelectedTheme: any;
}>({
  colors: {} as ColorsScheme,
  colorScheme: 'light',
  toggleTheme: () => { },
  setSelectedTheme: () => { },
});

export const ThemeContext = ({ children }: any) => {
  const systemColorScheme = useColorScheme();
  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(
    systemColorScheme || 'light',
  );
  const [selectedTheme, setSelectedTheme] = useState<
    'light' | 'dark' | 'system'
  >('system');

  const colors = useThemeColors(colorScheme);

  useEffect(() => {
    if (selectedTheme === 'system') {
      setColorScheme(systemColorScheme || 'light');
    } else {
      setColorScheme(selectedTheme);
    }
  }, [systemColorScheme, selectedTheme]);

  useEffect(() => {
    StatusBar.setBarStyle(
      colorScheme === 'light' ? 'dark-content' : 'light-content',
    );
  }, [colorScheme]);

  const toggleTheme = () => {
    setColorScheme(prev => (prev === 'light' ? 'dark' : 'light'));
  };

  useEffect(() => {
    const loadTheme = async () => {
      try {
        const savedTheme = await AsyncStorage.getItem('selectedTheme');

        if (
          savedTheme === 'light' ||
          savedTheme === 'dark' ||
          savedTheme === 'system'
        ) {
          setSelectedTheme(savedTheme);
        }
      } catch (error) {
        console.error('Error loading theme selection', error);
      }
    };

    loadTheme();
  }, []);

  return (
    <ThemeColors.Provider
      value={{ colors, colorScheme, toggleTheme, setSelectedTheme }}>
      {children}
    </ThemeColors.Provider>
  );
};

export const useTheme = () => useContext(ThemeColors);
