1import { HStack, Text, SliderTrack, SliderFilledTrack, Slider, SliderProps } from '@chakra-ui/react';
  2import { resetStrategy } from 'constants/Settings';
  3import { formatBytes } from 'utils/formatByte';
  4import { useTranslation } from 'react-i18next';
  5import { FC } from 'react';
  6
  7export const UsageSliderCompact: FC<UsageSliderProps> = (props) => {
  8  const { used, total } = props;
  9  const isUnlimited = total === 0 || total === null;
 10  return (
 11    <HStack
 12      justifyContent="space-between"
 13      fontSize="xs"
 14      fontWeight="medium"
 15      color="gray.600"
 16      _dark={{
 17        color: 'gray.400',
 18      }}
 19    >
 20      <Text>
 21        {formatBytes(used)} /{' '}
 22        {isUnlimited ? (
 23          <Text as="span" fontFamily="system-ui">
 24            ∞
 25          </Text>
 26        ) : (
 27          formatBytes(total)
 28        )}
 29      </Text>
 30    </HStack>
 31  );
 32};
 33
 34type UsageSliderProps = {
 35  used: number;
 36  total: number | null;
 37  dataLimitResetStrategy: string | null;
 38  totalUsedTraffic: number;
 39} & SliderProps;
 40
 41const getResetStrategy = (strategy: string): string => {
 42  for (var i = 0; i < resetStrategy.length; i++) {
 43    const entry = resetStrategy[i];
 44    if (entry.value == strategy) {
 45      return entry.title;
 46    }
 47  }
 48  return 'No';
 49};
 50
 51export const UsageSlider: FC<UsageSliderProps> = (props) => {
 52  const {
 53    used,
 54    total,
 55    dataLimitResetStrategy,
 56    totalUsedTraffic,
 57    ...restOfProps
 58  } = props;
 59  const isUnlimited = total === 0 || total === null;
 60  const isReached = !isUnlimited && (used / total) * 100 >= 100;
 61  const { t } = useTranslation();
 62  return (
 63    <>
 64      <Slider
 65        orientation="horizontal"
 66        value={isUnlimited ? 100 : Math.min((used / total) * 100, 100)}
 67        colorScheme={isReached ? 'red' : 'primary'}
 68        {...restOfProps}
 69      >
 70        <SliderTrack h="6px" borderRadius="full">
 71          <SliderFilledTrack borderRadius="full" />
 72        </SliderTrack>
 73      </Slider>
 74      <HStack
 75        justifyContent="space-between"
 76        fontSize="xs"
 77        fontWeight="medium"
 78        color="gray.600"
 79        _dark={{
 80          color: 'gray.400',
 81        }}
 82      >
 83        <Text>
 84          {formatBytes(used)} /{' '}
 85          {isUnlimited ? (
 86            <Text as="span" fontFamily="system-ui">
 87              ∞
 88            </Text>
 89          ) : (
 90            formatBytes(total) +
 91            (dataLimitResetStrategy && dataLimitResetStrategy !== 'no_reset'
 92              ? ' ' +
 93              t(
 94                'userDialog.resetStrategy' +
 95                getResetStrategy(dataLimitResetStrategy)
 96              )
 97              : '')
 98          )}
 99        </Text>
100        <Text>
101          {t('usersTable.total')}: {formatBytes(totalUsedTraffic)}
102        </Text>
103      </HStack>
104    </>
105  );
106};