RTHPlanDetails.tsx

import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { connect } from 'react-redux';

import { COLLECTIVE_RTH_TIMING } from '~/features/show/constants';
import {
  type CollectiveRTHPlanSummaryItem,
  getShowStartTime,
} from '~/features/show/selectors';
import { getShowSegments } from '~/features/show/selectors/core';
import type { ShowSegmentsRecord } from '~/features/show/types';
import type { RootState } from '~/store/reducers';
import { formatDurationMS, formatTimeOfDay } from '~/utils/formatting';

const keyPrefix = 'collectiveRTHPanel.rthPlanDetails';

const BodyRow: React.FC<{
  plan: CollectiveRTHPlanSummaryItem;
  showStartTime: number | null;
}> = ({ plan, showStartTime }) => (
  <TableRow>
    <TableCell>{formatTimeOfDay(plan.time + (showStartTime ?? NaN))}</TableCell>
    <TableCell>{formatDurationMS(plan.time)}</TableCell>
    <TableCell>
      {formatTimeOfDay(
        plan.time +
          plan.maxDuration +
          (showStartTime ?? NaN) +
          COLLECTIVE_RTH_TIMING.slowdownDuration -
          COLLECTIVE_RTH_TIMING.slowdownDurationInShowTime
      )}
    </TableCell>
    <TableCell>{formatDurationMS(plan.time + plan.maxDuration)}</TableCell>
    <TableCell>{formatDurationMS(plan.maxDuration)}</TableCell>
  </TableRow>
);

const RTHPlansTable: React.FC<{
  plans: CollectiveRTHPlanSummaryItem[];
  showStartTime: number | null;
}> = ({ plans, showStartTime }) => {
  const { t } = useTranslation(undefined, { keyPrefix });
  return (
    <TableContainer>
      <Table size='small'>
        <TableHead>
          <TableRow>
            <TableCell>{t('column.start')}</TableCell>
            <TableCell>{t('column.startShow')}</TableCell>
            <TableCell>{t('column.end')}</TableCell>
            <TableCell>{t('column.endShow')}</TableCell>
            <TableCell>{t('column.duration')}</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {plans.map((plan, index) => (
            <BodyRow key={index} plan={plan} showStartTime={showStartTime} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

const RTHPlanDetails: React.FC<{
  plans: CollectiveRTHPlanSummaryItem[];
  showStartTime: number | null;
  showSegments: ShowSegmentsRecord | undefined;
}> = ({ plans, showSegments, showStartTime }) => {
  const { t } = useTranslation(undefined, { keyPrefix });
  const showSegment = showSegments?.show;
  return (
    <Box sx={{ p: 1 }}>
      <Typography variant='h6'>{t('info.showSegment.title')}</Typography>
      <Table size='small'>
        <TableRow>
          <TableCell>{t('info.showSegment.start')}</TableCell>
          <TableCell>
            {showSegment !== undefined ? formatDurationMS(showSegment[0]) : ''}
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>{t('info.showSegment.end')}</TableCell>
          <TableCell>
            {showSegment !== undefined ? formatDurationMS(showSegment[1]) : ''}
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>{t('info.showSegment.duration')}</TableCell>
          <TableCell>
            {showSegment !== undefined
              ? formatDurationMS(showSegment[1] - showSegment[0])
              : ''}
          </TableCell>
        </TableRow>
      </Table>

      <Typography variant='h6'>{t('info.rth.title')}</Typography>
      <Table size='small'>
        <TableRow>
          <TableCell>{t('info.rth.numPlans')}</TableCell>
          <TableCell>{plans.length}</TableCell>
        </TableRow>
      </Table>

      <RTHPlansTable plans={plans} showStartTime={showStartTime} />
    </Box>
  );
};

const ConnectedRTHPlanDetails = connect((state: RootState) => ({
  showSegments: getShowSegments(state),
  showStartTime: getShowStartTime(state),
}))(RTHPlanDetails);

export default ConnectedRTHPlanDetails;