import { Outlet, useNavigation } from "react-router";
import { HydrateFallback } from "../HydrateFallback";
import { AppBar } from "../AppBar";
import styled from "styled-components";
import { useAuthSocket } from "../../hooks/useAuthSocket";
import { WebScoketContext } from "../../context/WebsocketContext";
import { Alert, Button } from "antd";

const StyledContainer = styled.div`
  padding-bottom: 90px;
  box-sizing: border-box;
`;
export const AppBarLayout = () => {
  const navigation = useNavigation();
  const loading = navigation.state === 'loading';
  const [sender] = useAuthSocket();
  return loading ? <HydrateFallback /> : (<StyledContainer>
    <WebScoketContext.Provider value={{ messageSender: sender }}>
      <Alert.ErrorBoundary>
        <Outlet />
      </Alert.ErrorBoundary>
      <AppBar />
    </WebScoketContext.Provider>
  </StyledContainer>);
}