import { type FC, Fragment } from 'react';

import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { type StreamRateMetric } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useStreamMetrics } from '../../../hooks/useStreamMetrics';

import MetricSparkline from './MetricSparkline';
import MetricValue from './MetricValue';

type StreamMetricsProps = {
  /** Anchors the time legend to the live elapsed time once streaming */
  isStreaming: boolean;
};

const StreamMetrics: FC<StreamMetricsProps> = props => {
  const { isStreaming } = props;
  const { t } = useLokaliseTranslation('livestream');
  const theme = useTheme();
  const metrics = useStreamMetrics(isStreaming);

  const rateRows: { label: string; metric: StreamRateMetric }[] = [
    { label: t('metrics.video_bitrate'), metric: metrics.videoBitrate },
    { label: t('metrics.frame_rate'), metric: metrics.frameRate },
    { label: t('metrics.audio_bitrate'), metric: metrics.audioBitrate },
  ];

  const footerItems = [
    {
      label: t('metrics.max_video_resolution'),
      value: metrics.maxVideoResolution,
    },
    { label: t('metrics.audio_format'), value: metrics.audioFormat },
  ];

  return (
    <HuCardContainer
      sx={{
        py: theme.spacing(1),
        width: '100%',

        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: theme.spacing(2),
        },
      }}
    >
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {t('metrics.stream_metrics_title')}
      </Typography>
      <Stack
        sx={{
          display: 'grid',
          gridTemplateColumns: '1fr max-content',
          alignItems: 'center',
          columnGap: 2,
          rowGap: 2,
        }}
      >
        {rateRows.map(row => (
          <Fragment key={row.label}>
            <MetricSparkline
              ready={metrics.ready}
              values={row.metric.history}
              ticks={metrics.timeTicks}
            />
            <Stack>
              <MetricValue
                ready={metrics.ready}
                value={row.metric.formattedValue}
              />
              <Typography
                variant="globalXS"
                color="new.text.neutral.lighter"
              >
                {row.label}
              </Typography>
            </Stack>
          </Fragment>
        ))}
      </Stack>
      <Divider />
      <Stack sx={{ flexDirection: 'row' }}>
        {footerItems.map((item, index) => (
          <Stack
            key={item.label}
            sx={{
              flex: 1,
              flexDirection: 'row',
            }}
          >
            {index > 0 && (
              <Divider
                orientation="vertical"
                flexItem
                sx={{ mr: 2 }}
              />
            )}
            <Stack>
              <MetricValue
                ready={metrics.ready}
                value={item.value}
              />
              <Typography
                variant="globalXS"
                color="new.text.neutral.lighter"
              >
                {item.label}
              </Typography>
            </Stack>
          </Stack>
        ))}
      </Stack>
    </HuCardContainer>
  );
};

export default StreamMetrics;
