ontime/apps/client/src/views/cuesheet/CuesheetPage.tsx

import { useDisclosure } from '@mantine/hooks';
import { IoApps } from 'react-icons/io5';

import IconButton from '../../common/components/buttons/IconButton';
import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { getIsNavigationLocked } from '../../externals';
import CuesheetOverview from '../../features/overview/CuesheetOverview';
import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
import CuesheetTableWrapper from './CuesheetTableWrapper';

import styles from './CuesheetPage.module.scss';

export default function CuesheetPage() {
  'use memo';
  const [isMenuOpen, menuHandler] = useDisclosure();

  useWindowTitle('Cuesheet');

  const isLocked = getIsNavigationLocked();

  return (
    <RundownSelectionContextProvider>
      <EntryActionsProvider>
        <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
        <EntryEditModal />
        <div className={styles.tableWrapper} data-testid='cuesheet'>
          <CuesheetOverview>
            {!isLocked && (
              <IconButton
                aria-label='Toggle navigation'
                variant='subtle-white'
                size='xlarge'
                onClick={menuHandler.open}
              >
                <IoApps />
              </IconButton>
            )}
          </CuesheetOverview>
          <CuesheetProgress />
          <CuesheetTableWrapper />
        </div>
      </EntryActionsProvider>
    </RundownSelectionContextProvider>
  );
}