import React from 'react';

import useRerenderTimeout from '../hooks/use-rerender-timeout';
import Upcoming from '../components/upcoming';
import Started from '../components/started';
import ProgressBar from '../components/progress-bar';

import { getMeetingStatus } from './utils';

type MeetingProps = {
  startsAt: Date;
};

const Meeting = ({ startsAt }: MeetingProps) => {
  const status = getMeetingStatus(startsAt);

  useRerenderTimeout({ date: status.endsAt });

  if (status.value === 'started') return <Started />;

  return (
    <>
      {status.value === 'imminent' && <ProgressBar />}
      <Upcoming />
    </>
  );
};

export default Meeting;