import React, { createContext, useContext, useState, useEffect } from 'react';

// Create a ThemeContext with a default value
const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
  setColorPalette: () => {}
});

// Custom hook to use the ThemeContext
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    console.error('useTheme must be used within a ThemeProvider');
    return {
      theme: 'light',
      toggleTheme: () => {},
      setColorPalette: () => {}
    };
  }
  return context;
};

// Higher-Order Component to check if ThemeContext exists
const withExistingThemeContext = (Component) => (props) => {
  const existingContext = useContext(ThemeContext);
  return (
    <ThemeContext.Provider value={existingContext || {
      theme: 'light',
      toggleTheme: () => {},
      setColorPalette: () => {}
    }}>
      <Component {...props} />
    </ThemeContext.Provider>
  );
};

// ThemeProvider component
const ThemeProvider = ({ children }) => {
  const applyColorPalette = (palette) => {
    palette.colors.forEach(color => {
      if (color.hex) {
        document.documentElement.style.setProperty(`--${color.type}-${color.hex.replace('#', '')}`, color.hex);
        if (color.type === 'primary') {
          document.documentElement.style.setProperty('--primary-color', color.hex);
        }
        if (color.type === 'secondary') {
          document.documentElement.style.setProperty('--secondary-color', color.hex);
        }
      }
    });
  };

  const [theme, setTheme] = useState(() => {
    const savedTheme = localStorage.getItem('theme') || 'light';
    const savedPalette = localStorage.getItem('selectedPalette');
    if (savedPalette) {
      const palette = JSON.parse(savedPalette);
      applyColorPalette(palette);
    }
    return savedTheme;
  });

  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const setColorPalette = (palette) => {
    applyColorPalette(palette);
    localStorage.setItem('selectedPalette', JSON.stringify(palette));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, setColorPalette }}>
      <div className={`theme-transition theme-${theme}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
};

export default withExistingThemeContext(ThemeProvider);