import useTheme from '@material-hu/mui/styles/useTheme';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import { type SessionDetail } from 'src/pages/dashboard/learning/sessions/types';
import { lazyRetry } from 'src/utils/lazyRetry';

const PublishedState = lazyRetry(() => import('./PublishedState'));
const InProgressState = lazyRetry(() => import('./InProgressState'));
const FinishedState = lazyRetry(() => import('./FinishedState'));

type SessionStatusProps = { session: SessionDetail };

/**
 * Component used to handle the session status and actions
 * @param session - The session object
 * @returns The correct component based on the session status
 *
 * Cases:
 *
 * 1. Session not started
 *    - If confirmed assistance, show success pill
 *    - If not confirmed assistance, show button to confirm assistance
 *
 * 2. Session in progress
 *    - If is not presential, show button to join session
 *    - If is presential, show the address of the session
 *
 * 3. Session finished
 *    - Show the alert saying the session has finished X days ago
 *
 */
export const SessionStatus = ({ session }: SessionStatusProps) => {
  const { palette } = useTheme();
  const { status } = session;

  if (status === 'FINISHED') return <FinishedState session={session} />;

  return (
    <CardContainer
      fullWidth
      sx={
        status === 'IN_PROGRESS'
          ? { backgroundColor: palette.new.graphics.brand[400] }
          : undefined
      }
    >
      {status === 'PUBLISHED' && <PublishedState session={session} />}
      {status === 'IN_PROGRESS' && <InProgressState session={session} />}
    </CardContainer>
  );
};
