import React, { ReactNode, useEffect } from 'react';
import { omit } from 'lodash';
import { inject, observer } from 'mobx-react';
import Profiles from 'store/profiles';
import UI from 'store/ui';

interface IWrapperProps {
  color?: string;
  header?: string;
  ui?: UI;
  profiles?: Profiles;
  noFooter?: boolean;
  children: ReactNode;
  isFullPage?: boolean;
}

const Wrapper = (props: IWrapperProps) => {
  const { children, ui, profiles, header, color = 'ocean', noFooter } = props;
  const rest = omit(props, 'ui', 'header', 'color', 'noFooter');

  useEffect(() => {
    if (ui) {
      if (header) {
        ui.setHeaderStyle(header);
        ui.setColorTransition(header);
      }
      ui.pageColor = profiles?.isCompany ? 'purple' : color;
      ui.setIsHiddenFooter(!!noFooter);
      if (header === 'none') {
        ui.setHasCustomerMenu(false);
        ui.setHasSideMenu(false);
      }
    }
  }, []);

  return <div {...rest}>{children}</div>;
};

const LayoutWrapper = inject('ui', 'profiles')(observer(Wrapper));

export default LayoutWrapper;