import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import { Tabs, Tab, Paper, useTheme, Tooltip } from '@mui/material'; import MoreTooltip from './MoreTooltip'; import { OpenDialogs } from '../MainDialogs'; import { Page } from '.'; import { SettingsApplications, SmartToy, Storefront, AddBox, Assignment, MoreHoriz, } from '@mui/icons-material'; import RobotAvatar from '../../components/RobotAvatar'; type Direction = 'left' | 'right' | undefined; interface NavBarProps { page: Page; nickname?: string | null; setPage: (state: Page) => void; setSlideDirection: (state: { in: Direction; out: Direction }) => void; width: number; height: number; open: OpenDialogs; setOpen: (state: OpenDialogs) => void; closeAll: OpenDialogs; currentOrder: number | null; hasRobot: boolean; baseUrl: string; color: 'primary' | 'secondary'; } const NavBar = ({ page, setPage, setSlideDirection, open, nickname = null, setOpen, closeAll, width, height, currentOrder, hasRobot = false, baseUrl, color, }: NavBarProps): JSX.Element => { const theme = useTheme(); const { t } = useTranslation(); const history = useHistory(); const smallBar = width < 50; const tabSx = smallBar ? { position: 'relative', bottom: nickname ? '1em' : '0em', minWidth: '1em' } : { position: 'relative', bottom: '1em', minWidth: '2em' }; const pagesPosition = { robot: 1, offers: 2, create: 3, order: 4, settings: 5, }; const handleSlideDirection = function (oldPage: Page, newPage: Page) { 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) { if (newPage === 'none') { return null; } else { handleSlideDirection(page, newPage); setPage(newPage); const param = newPage === 'order' ? currentOrder ?? '' : ''; setTimeout( () => history.push(`/${newPage}/${param}`), theme.transitions.duration.leavingScreen * 3, ); } }; useEffect(() => { setOpen(closeAll); }, [page]); return ( setOpen({ ...closeAll, profile: !open.profile })} icon={ nickname ? ( ) : ( <> ) } /> } iconPosition='start' /> } iconPosition='start' /> } iconPosition='start' /> } iconPosition='start' /> } iconPosition='start' /> { open.more ? null : setOpen({ ...open, more: true }); }} icon={ } iconPosition='start' /> ); }; export default NavBar;