import { lazy } from 'react';

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

import { SessionStatus } from '../../constants';
import {
  type SessionAttendanceStats,
  type SessionStatusType,
} from '../../types';

import { AttendanceStatsSkeleton } from './AttendanceStatsSkeleton';

const ConfirmationAttendanceChart = lazy(
  () => import('./charts/ConfirmationAttendanceChart'),
);

const GeneralAttendanceChart = lazy(
  () => import('./charts/GeneralAttendanceChart'),
);

const ParticipationAttendanceChart = lazy(
  () => import('./charts/ParticipationAttendanceChart'),
);

const AssignedColaborators = lazy(
  () => import('./charts/AssignedColaborators'),
);

const AttendanceChart = lazy(() => import('./charts/AttendanceChart'));

type AttendanceStatsProps = {
  stats?: SessionAttendanceStats;
  sessionStatus?: SessionStatusType;
  isLoading: boolean;
};

export const AttendanceStats = ({
  stats,
  sessionStatus,
  isLoading,
}: AttendanceStatsProps) => {
  if (isLoading || !stats) return <AttendanceStatsSkeleton />;

  return (
    <Stack sx={{ flexDirection: 'row', gap: 2, minHeight: '185px' }}>
      {sessionStatus === SessionStatus.published && (
        <>
          <AssignedColaborators stats={stats} />
          <ConfirmationAttendanceChart stats={stats} />
        </>
      )}
      {sessionStatus === SessionStatus.finished && (
        <>
          <GeneralAttendanceChart stats={stats} />
          <ParticipationAttendanceChart stats={stats} />
          <AttendanceChart stats={stats} />
        </>
      )}
    </Stack>
  );
};