import { Notification } from "@ax/components";
import { useNetworkStatus } from "@ax/hooks";

import AppBar, { type IAppBarProps } from "./AppBar";

import * as S from "./style";

const MainWrapper = (props: IWrapperProps): JSX.Element => {
	const { children, fixedAppBar, fullWidth, hasAnimation } = props;

	const { isOnline } = useNetworkStatus();

	return (
		<S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper">
			{hasAnimation && <S.BackgroundAnimation />}
			<AppBar {...props} />
			<S.Main fullWidth={fullWidth} data-testid="main-component" id="main-component">
				{!isOnline && (
					<Notification
						type="error"
						text="You are offline. Please, check your internet connection. Changes you make may not be saved."
					/>
				)}
				{children}
			</S.Main>
		</S.Wrapper>
	);
};

export interface IWrapperProps extends IAppBarProps {
	children?: any[] | JSX.Element;
	fullWidth?: boolean;
}

export default MainWrapper;
