import { createContext, useContext, useState, useCallback } from "react";
import { SettingsModal } from "./SettingsModal";

export interface SettingsModalContextType {
  showSettingsModal: boolean;
  openSettingsModal: (section?: string) => void;
  closeSettingsModal: () => void;
}

export const SettingsModalContext = createContext<SettingsModalContextType>({
  showSettingsModal: false,
  openSettingsModal: () => {},
  closeSettingsModal: () => {},
});

export const useSettingsModal = () => useContext(SettingsModalContext);

export function SettingsModalProvider({ children }: { children: React.ReactNode }) {
  const [showSettingsModal, setShowSettingsModal] = useState(false);
  const [initialSection, setInitialSection] = useState<string | undefined>();

  const openSettingsModal = useCallback((section?: string) => {
    setInitialSection(section);
    setShowSettingsModal(true);
  }, []);

  const closeSettingsModal = useCallback(() => {
    setShowSettingsModal(false);
  }, []);

  return (
    <SettingsModalContext.Provider
      value={{ showSettingsModal, openSettingsModal, closeSettingsModal }}
    >
      {children}
      <SettingsModal
        open={showSettingsModal}
        onClose={closeSettingsModal}
        initialSection={initialSection}
      />
    </SettingsModalContext.Provider>
  );
}
