import {useCallback} from 'react';
import useLocalStorage from '@technote-space/use-local-storage';
import useMediaQuery from '@material-ui/core/useMediaQuery';

export type ThemeColor = 'light' | 'dark';
const useDarkMode = (): [ThemeColor, () => void, (isDarkMode: boolean) => void] => {
  const [isDarkMode, setDarkMode] = useLocalStorage('is-dark-mode', useMediaQuery('(prefers-color-scheme: dark)'));
  const toggleDarkMode            = useCallback(() => {
    setDarkMode(isDarkMode => !isDarkMode);
  }, []);
  return [isDarkMode ? 'dark' : 'light', toggleDarkMode, setDarkMode];
};

export default useDarkMode;