import React, { useContext, useEffect } from 'react';
import { Navbar } from 'components/navbar/navbar';
import { Sidebar } from '../../components/sidebar/sidebar';
import { TNavbarItem } from 'common/types';
import { AppContext } from 'context/app-context';
import { componentMap } from 'context/component-map';
import { useStyles } from './styles';

interface ModuleWrapperProps {
  navbarItems: TNavbarItem[];
  defaultContent: string;
}

export const ModuleWrapper: React.FC<ModuleWrapperProps> = ({
  navbarItems,
  defaultContent,
}) => {
  const { state, dispatch } = useContext(AppContext);
  const classes = useStyles();

  useEffect(() => {
    dispatch({ type: 'content/set', payload: defaultContent });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={classes.moduleWrapper}>
      <Sidebar />
      <div className={classes.innerWrapper}>
        <Navbar navbarItems={navbarItems} />
        {componentMap[state.content.component]}
      </div>
    </div>
  );
};
