import { createContext, type ReactNode, useContext, useMemo } from 'react';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import { useSettingsDrawer } from 'src/components/dashboard/navbar/SettingsDrawer';

type PreferencesDrawerContextValue = {
  openPreferencesDrawer: () => void;
};

const PreferencesDrawerContext = createContext<PreferencesDrawerContextValue>({
  openPreferencesDrawer: () => {},
});

export const PreferencesDrawerProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
  const { drawer, showDrawer } = useSettingsDrawer();
  const HuGoThemeProvider = useHuGoTheme();

  const value = useMemo(
    () => ({ openPreferencesDrawer: () => showDrawer() }),
    [showDrawer],
  );

  return (
    <PreferencesDrawerContext.Provider value={value}>
      {children}
      <HuGoThemeProvider>{drawer}</HuGoThemeProvider>
    </PreferencesDrawerContext.Provider>
  );
};

export const usePreferencesDrawer = () => useContext(PreferencesDrawerContext);