2024-01-02 17:46:39 +00:00

195 lines
5.5 KiB
TypeScript

import React, { useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';
import { Tabs, Tab, Paper, useTheme } from '@mui/material';
import MoreTooltip from './MoreTooltip';
import { type Page, isPage } from '.';
import {
SettingsApplications,
SmartToy,
Storefront,
AddBox,
Assignment,
MoreHoriz,
} from '@mui/icons-material';
import RobotAvatar from '../../components/RobotAvatar';
import { AppContext, type UseAppStoreType, closeAll } from '../../contexts/AppContext';
import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
const NavBar = (): JSX.Element => {
const theme = useTheme();
const { t } = useTranslation();
const { page, setPage, settings, setSlideDirection, open, setOpen, windowSize, navbarHeight } =
useContext<UseAppStoreType>(AppContext);
const { garage, orderUpdatedAt, robotUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
const navigate = useNavigate();
const location = useLocation();
const smallBar = windowSize?.width < 50;
const color = settings.network === 'mainnet' ? 'primary' : 'secondary';
const tabSx = smallBar
? {
position: 'relative',
bottom: Boolean(garage.getSlot()?.hashId) ? '0.9em' : '0.13em',
minWidth: '1em',
}
: { position: 'relative', bottom: '1em', minWidth: '2em' };
const pagesPosition = {
robot: 1,
offers: 2,
create: 3,
order: 4,
settings: 5,
};
useEffect(() => {
// change tab (page) into the current route
const pathPage: Page | string = location.pathname.split('/')[1];
if (pathPage === 'index.html') {
navigate('/robot');
setPage('robot');
}
if (isPage(pathPage) && pathPage.includes('order')) {
setPage(pathPage);
}
}, [location, navigate, setPage, orderUpdatedAt, robotUpdatedAt]);
const handleSlideDirection = function (oldPage: Page, newPage: Page): void {
const oldPos: number = pagesPosition[oldPage];
const newPos: number = pagesPosition[newPage];
setSlideDirection(
newPos > oldPos ? { in: 'left', out: 'right' } : { in: 'right', out: 'left' },
);
};
const changePage = function (mouseEvent: any, newPage: Page): void {
if (newPage !== 'none') {
const slot = garage.getSlot();
handleSlideDirection(page, newPage);
setPage(newPage);
const param =
newPage === 'order'
? `${String(slot?.activeShortAlias)}/${String(
slot?.getRobot(slot?.activeShortAlias ?? '')?.activeOrderId ??
slot?.getRobot(slot?.lastShortAlias ?? '')?.lastOrderId,
)}`
: '';
setTimeout(() => {
navigate(`/${newPage}/${param}`);
}, theme.transitions.duration.leavingScreen * 3);
}
};
useEffect(() => {
setOpen(closeAll);
}, [page, setOpen]);
const slot = garage.getSlot();
return (
<Paper
elevation={6}
sx={{
height: `${navbarHeight}em`,
width: `100%`,
position: 'fixed',
bottom: 0,
borderRadius: 0,
}}
>
<Tabs
TabIndicatorProps={{ sx: { height: '0.3em', position: 'absolute', top: 0 } }}
variant='fullWidth'
value={page}
indicatorColor={color}
textColor={color}
onChange={changePage}
>
<Tab
sx={{ ...tabSx, minWidth: '2.5em', width: '2.5em', maxWidth: '4em' }}
value='none'
disabled={slot?.nickname === null}
onClick={() => {
setOpen({ ...closeAll, profile: !open.profile });
}}
icon={
slot?.hashId ? (
<RobotAvatar
style={{ width: '2.3em', height: '2.3em', position: 'relative', top: '0.2em' }}
avatarClass={theme.palette.mode === 'dark' ? 'navBarAvatarDark' : 'navBarAvatar'}
hashId={slot?.hashId}
/>
) : (
<></>
)
}
/>
<Tab
label={smallBar ? undefined : t('Robot')}
sx={{ ...tabSx, minWidth: '1em' }}
value='robot'
icon={<SmartToy />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Offers')}
value='offers'
icon={<Storefront />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Create')}
value='create'
icon={<AddBox />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Order')}
value='order'
disabled={
!Boolean(slot?.hashId) ||
!Boolean(slot?.getRobot(slot?.activeShortAlias ?? '')?.activeOrderId)
}
icon={<Assignment />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Settings')}
value='settings'
icon={<SettingsApplications />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('More')}
value='none'
onClick={() => {
setOpen((open) => {
return { ...open, more: !open.more };
});
}}
icon={
<MoreTooltip>
<MoreHoriz />
</MoreTooltip>
}
iconPosition='start'
/>
</Tabs>
</Paper>
);
};
export default NavBar;