import { useTranslation } from 'react-i18next';

import Button from '@design-system/Buttons/Button';
import { IconButton, Stack, Typography, useTheme } from '@mui/material';
import { IconArrowUp, IconProgress } from '@tabler/icons-react';

import { type TableLoaderProps } from './types';

const TableLoader = ({
  loadedCount,
  totalCount,
  onLoadMore,
  onScrollToTop,
  loadMoreLabel,
  slotProps,
}: TableLoaderProps) => {
  const theme = useTheme();
  const { t } = useTranslation('material_hu_only');
  const isEndOfResults = loadedCount >= totalCount;

  return (
    <Stack
      direction="row"
      justifyContent="space-between"
      alignItems="center"
      sx={{
        p: 2,
        border: `1px solid ${theme.palette.new.border.neutral.default}`,
        backgroundColor: theme.palette.new.background.elements.default,
        borderRadius: theme.spacing(2),
      }}
    >
      <Stack width="33%" />
      <Stack
        direction="row"
        justifyContent="center"
        alignItems="center"
        width="33%"
      >
        {isEndOfResults && (
          <Typography
            variant="globalS"
            color="textSecondary"
          >
            {t('table_loader.no_more_results')}
          </Typography>
        )}
        {!isEndOfResults && (
          <Button
            variant="secondary"
            size="small"
            onClick={onLoadMore}
            endIcon={<IconProgress size={16} />}
            {...slotProps?.button}
          >
            {loadMoreLabel ?? t('table_loader.load_more')}
          </Button>
        )}
      </Stack>
      <Stack
        direction="row"
        justifyContent="flex-end"
        alignItems="center"
        spacing={1}
        width="33%"
      >
        <Typography
          variant="globalS"
          color="textSecondary"
        >
          {t('table_loader.loaded_of_total', {
            loaded: loadedCount,
            total: totalCount,
          })}
        </Typography>
        <IconButton
          onClick={onScrollToTop}
          variant="secondary"
          aria-label={t('table_loader.scroll_to_top')}
        >
          <IconArrowUp size={16} />
        </IconButton>
      </Stack>
    </Stack>
  );
};

export type { TableLoaderProps };

TableLoader.displayName = 'TableLoader';

export default TableLoader;
