import {
  Box,
  LinearProgressBar,
  LinearProgressBarProps,
} from '@wix/design-system';
import React, { useMemo, useState } from 'react';
import { Heading } from '../Heading';

export interface LinearAbsoluteProgressBarProps extends LinearProgressBarProps {
  count: number;
  total?: number | null;
}

export function LinearAbsoluteProgressBar(
  props: LinearAbsoluteProgressBarProps,
) {
  const { dataHook, value, count, total } = props;
  const [formatter] = useState(() =>
    Intl.NumberFormat('en', { notation: 'compact' }),
  );

  const countFormatted = useMemo(() => formatter.format(count), [count]);
  const totalFormatted = useMemo(
    () => (total != null ? formatter.format(total) : null),
    [total],
  );

  return (
    <Box verticalAlign="middle" dataHook={dataHook}>
      <LinearProgressBar value={value} />

      <Box
        width={total != null ? '54px' : '24px'}
        minWidth={0}
        flexShrink={0}
        align="right"
      >
        <Heading size="extraTiny">
          <span data-hook="progress-count">{countFormatted}</span>
          {totalFormatted != null && (
            <>
              <span>/</span>
              <span data-hook="progress-total">{totalFormatted}</span>
            </>
          )}
        </Heading>
      </Box>
    </Box>
  );
}