import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
import { CountryList, LanguageList } from "@/components/home/home.type";

interface SettingsState {
  language: LanguageList | null;
  country: CountryList | null;
  isSocialOpen: boolean;
  isLogOutOpen: boolean;
  hasHydrated: boolean;
  setLanguage: (language: LanguageList) => void;
  setCountry: (country: CountryList) => void;
  setIsSocialOpen: (value: boolean) => void;
  setIsLogOutOpen: (value: boolean) => void;
  setHasHydrated: (value: boolean) => void;
}

export const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      language: null,
      country: null,
      isSocialOpen: false,
      isLogOutOpen: false,
      hasHydrated: false,
      setLanguage: (language) => set({ language }),
      setCountry: (country) => set({ country }),
      setIsSocialOpen: (value) => set({ isSocialOpen: value }),
      setIsLogOutOpen: (value) => set({ isLogOutOpen: value }),
      setHasHydrated: (value) => set({ hasHydrated: value }),
    }),
    {
      name: "settings-storage",
      storage: createJSONStorage(() => localStorage),
      // Only the user's actual settings belong in localStorage. Persisting the
      // modal flags meant a reload could reopen the login/logout dialog.
      partialize: (state) => ({
        language: state.language,
        country: state.country,
      }),
      // The server renders with the initial state, so reading localStorage
      // during the first client render would produce different markup and a
      // hydration error. Rehydrate after mount instead — see
      // SettingsStoreHydration, mounted in app/layout.tsx.
      skipHydration: true,
      onRehydrateStorage: () => (state) => {
        state?.setHasHydrated(true);
      },
    }
  )
);