import React from 'react';
import { ThemeProvider } from 'styled-components';

import { themes } from './themes';

const reducer = (state, action) => {
  switch (action.type) {
    case `CHANGE_THEME`:
      return {
        ...state,
        themeName: action.name,
      };
  }
};

/**
 * Create the context itself.
 */
const Context = React.createContext({});

/**
 * The main Provider for making the App Context available throughout the app.
 */
const AppContextProvider = props => {
  const [ state, dispatch ] = React.useReducer(reducer, {
    themeName: `light`,
  });

  const context: AppContext = React.useMemo(
    () => ({ ...state, dispatch }),
    [state]
  );

  return (
    <Context.Provider value={context}>
      <ThemeProvider theme={themes[state.themeName]}>
        {props.children}
      </ThemeProvider>
    </Context.Provider>
  );
};

/**
 * Quick access to the App Context.
 */
const useAppContext = () => React.useContext(Context);

export {
  AppContextProvider,
  useAppContext,
};