import { PushNotificationConfig } from '@/hooks/usePushNotifications';
import { LayoutContent } from './Content';
import { Footer } from './Footer';
import { Header, HeaderNotification, HeaderProfile, HeaderSpacer, LocaleButton, ResponsiveSection } from './Header';
import { NavMenu } from './NavMenu';
import { Navigation } from './Navigation';
import { withLayoutProvider } from './Provider';
import { ThemeToggler } from './ThemeToggler';
import { LayoutWrapper } from './Wrapper';
import { Breadcrumbs } from '@/components/@extended';
import { useBreadcrumbs } from '@/components/Layout/MenuProvider';
import { ThemeColor } from '@/components/Layout/ThemeColor';
import { ErrorProps, LoadingIndicator } from 'ra-ui-materialui';
import { Outlet } from 'react-router-dom';
import { FcmForegroundListener } from '@/components/FcmForegroundListener';

type ILayoutProps = React.PropsWithChildren<{
  name: string;
  version: string;
  copy?: string;
  error?: React.ComponentType<ErrorProps>;
  enableThemeToggler: boolean;
  enableNotification: boolean;
  enableLocaleSwitcher: boolean;
  pushNotifications?: PushNotificationConfig;
}>;

const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
  const { name, version, enableThemeToggler, enableNotification, enableLocaleSwitcher, pushNotifications } = props;
  const { isLoading, navigation, breadcrumbs } = useBreadcrumbs();

  return (
    <LayoutWrapper>
      <Header>
        <HeaderSpacer />
        {enableLocaleSwitcher ? <LocaleButton /> : null}
        {enableThemeToggler ? <ThemeToggler /> : null}
        <ThemeColor />
        <LoadingIndicator />
        {enableNotification ? <HeaderNotification pushNotifications={pushNotifications} /> : null}
        <ResponsiveSection>
          <HeaderProfile />
        </ResponsiveSection>
      </Header>
      <NavMenu>
        <Navigation />
      </NavMenu>
      <LayoutContent error={props.error}>
        {!isLoading && (
          <Breadcrumbs
            titleBottom
            mode="breadcrumbs"
            navigation={navigation}
            breadcrumbs={breadcrumbs}
            card={false}
            divider={false}
            icon
            icons
          />
        )}
        {props.children}
        <Outlet />
        <Footer name={name} version={version} copy={props?.copy} />
      </LayoutContent>
      {pushNotifications ? <FcmForegroundListener config={pushNotifications} /> : null}
    </LayoutWrapper>
  );
});

export type { ILayoutProps };
export { Layout };