// [REQ T4]  Context API – ThemeContext przechowuje i udostępnia motyw (light/dark) całej aplikacji
// createContext to funkcja, która tworzy kontekst React, który pozwala na przekazywanie danych przez drzewo komponentów
// bez konieczności przekazywania propsów na każdym poziomie.
// useContext to hook, który pozwala na pobieranie wartości z kontekstu React w dowolnym miejscu w aplikacji React.
// useState to hook, który pozwala na przechowywanie stanu w funkcjonalnych komponentach React.
// useEffect to hook, który pozwala na wykonywanie efektów ubocznych w funkcjonalnych komponentach React.
import { createContext, useContext, useState, useEffect } from 'react';
// tworzymy kontekst ThemeContext, który będzie przechowywał informacje o aktualnym motywie (jasny/ciemny) i funkcję do jego przełączania
const ThemeContext = createContext(null);
// ThemeProvider to komponent, który dostarcza wartości z ThemeContext do całej aplikacji React, która jest opakowana w ten provider.
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(
    () => localStorage.getItem('rms_theme') || 'light'
  );
  // useEffect jest używany do synchronizacji atrybutu data-theme w elemencie html z aktualnym motywem oraz 
  // do zapisywania motywu w localStorage, aby zapamiętać wybór użytkownika między sesjami.
  // efekt który odpali się tylko wtedy gdy theme się zmieni 
  // document to globalny obiekt z js najwyższy możliwy poziom drzewa DOM
  // document.documentElement to element html, który jest najwyższym elementem w drzewie DOM, reprezentuje cały dokument HTML
  // setAttribute ustawia atrybut o nazwie data-theme na wartość theme, 
  // dzięki temu możemy stylować aplikację za pomocą CSS w zależności od wartości tego atrybutu
  // localStorage.setItem zapisuje wartość theme pod kluczem 'rms_theme' w localStorage, aby zapamiętać wybór użytkownika między sesjami
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('rms_theme', theme);
  }, [theme]);
  // toggleTheme to funkcja, która przełącza motyw między jasnym a ciemnym, jest przekazywana do wartości ThemeContext,
  // dzięki temu możemy ją wywołać w dowolnym miejscu w aplikacji React, aby zmienić motyw.
  const toggleTheme = () => setTheme((t) => (t === 'light' ? 'dark' : 'light'));
  // zwrócenie komponentu ThemeContext.Provider, który dostarcza wartości theme i toggleTheme do całej aplikacji React, która jest opakowana w ten provider. 
  // Dzięki temu możemy korzystać z tych wartości w dowolnym miejscu w aplikacji React za pomocą hooka useTheme.
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children} // wszystko co jest opakowane w ThemeProvider będzie miało dostęp do wartości theme i toggleTheme z ThemeContext
      // children to specjalna props, która reprezentuje wszystkie elementy, które są opakowane w ThemeProvider
      // korzystane jak rosyjska matrioszka, ale wasal mojego wasala nie jest moim wasalem
      , więc nie mogę przekazać propsów do dzieci, które są opakowane w ThemeProvider, dlatego muszę użyć kontekstu React
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used inside <ThemeProvider>');
  return ctx;
};
