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

import { getGridColumns, setGridColumns as persistGridColumns } from './storage';

/**
 * Globalne preferencje UI (na razie tylko liczba kolumn siatki scen). Ładowane raz
 * przy montażu z SecureStore (async) i dalej trzymane synchronicznie w state, żeby
 * ekrany siatek mogły czytać wartość w renderze bez await. Default 2 do czasu załadowania.
 */
interface Prefs {
  gridColumns: number;
  setGridColumns: (n: number) => void;
}

const Ctx = createContext<Prefs | null>(null);

export function PreferencesProvider({ children }: { children: React.ReactNode }) {
  const [gridColumns, setCols] = useState(2);

  useEffect(() => {
    getGridColumns()
      .then(setCols)
      .catch(() => {});
  }, []);

  const setGridColumns = (n: number) => {
    setCols(n);
    persistGridColumns(n).catch(() => {});
  };

  return <Ctx.Provider value={{ gridColumns, setGridColumns }}>{children}</Ctx.Provider>;
}

export function usePreferences(): Prefs {
  const c = useContext(Ctx);
  if (!c) throw new Error('usePreferences outside PreferencesProvider');
  return c;
}
