import { Helmet } from 'react-helmet-async';
import { useParams } from 'react-router';

import Stack from '@material-hu/mui/Stack/Stack';
import Typography from '@material-hu/mui/Typography/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useGetSession } from '../hooks/useGetSession';
import { useGetSessionAttendanceStats } from '../hooks/useGetSessionAttendanceStats';
import useSessionsTitle from '../hooks/useSessionsTitle';

import { AttendanceHeader } from './components/AttendanceHeader';
import { AttendanceSidebar } from './components/AttendanceSidebar';
import { AttendanceStats } from './components/AttendanceStats';
import { AttendanceTable } from './components/AttendanceTable';
import { DownloadReportButton } from './components/DownloadReportButton';

const ManageSessionAttendance = () => {
  const HugoThemeProvider = useHuGoTheme();
  const sessionsTitle = useSessionsTitle();
  const { t } = useLokaliseTranslation('learning');
  const params = useParams();

  const sessionId = params.id ? parseInt(params.id) : undefined;

  const { data: session, isLoading: isSessionLoading } =
    useGetSession(sessionId);

  const { data: attendanceStats, isLoading: isAttendanceStatsLoading } =
    useGetSessionAttendanceStats(sessionId);

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{formatTitle(sessionsTitle)}</title>
      </Helmet>
      <AttendanceHeader
        session={session}
        isLoading={isSessionLoading}
      />
      <Stack
        sx={{
          flexDirection: 'row',
          height: 'calc(100vh - 64px)', // 64px -> navbar height
          minHeight: 0,
          overflow: 'hidden',
        }}
      >
        <Stack
          sx={{
            minWidth: '75%',
            flex: 1,
            px: 7,
            py: 3,
            gap: 1.5,
            overflowY: 'auto',
            overflowX: 'hidden',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Typography
              variant="globalL"
              fontWeight="fontWeightSemiBold"
            >
              {t('session.attendance.manage_attendance')}
            </Typography>
            <DownloadReportButton sessionId={sessionId} />
          </Stack>
          <AttendanceStats
            stats={attendanceStats}
            sessionStatus={session?.status}
            isLoading={isAttendanceStatsLoading}
          />
          <AttendanceTable session={session} />
        </Stack>
        <AttendanceSidebar
          session={session}
          totalAssigned={attendanceStats?.totalAssigned}
          isLoading={isSessionLoading || isAttendanceStatsLoading}
        />
      </Stack>
    </HugoThemeProvider>
  );
};

export default ManageSessionAttendance;