import { IconCheck, IconX } from '@material-hu/icons/tabler';
import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  selectedCount: number;
  totalCount: number;
  isAllRows: boolean;
  onSelectAllAcross: () => void;
  onDeselectAll: () => void;
  onApproveClick: (event: React.MouseEvent<HTMLElement>) => void;
  onRejectClick: (event: React.MouseEvent<HTMLElement>) => void;
  isLoading?: boolean;
};

const BulkSelectionBar = ({
  selectedCount,
  totalCount,
  isAllRows,
  onSelectAllAcross,
  onDeselectAll,
  onApproveClick,
  onRejectClick,
  isLoading = false,
}: Props) => {
  const { t } = useLokaliseTranslation(['approval_requests']);

  if (selectedCount === 0) return null;

  const canExpandSelection =
    !isAllRows && selectedCount < totalCount && totalCount > 1;

  return (
    <Stack
      sx={{
        alignItems: 'center',
        flexDirection: 'row',
        gap: 2,
        px: 2,
        py: 1.5,
        borderTopLeftRadius: 2,
        borderTopRightRadius: 2,
        border: ({ palette }) =>
          `1px solid ${palette.new.border.neutral.default}`,
        backgroundColor: ({ palette }) =>
          palette.new.background.elements.default,
      }}
    >
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'fontWeightSemiBold' }}
      >
        {t('approval_requests:bulk_actions.selection_count', {
          count: selectedCount,
        })}
      </Typography>

      {canExpandSelection && (
        <Link
          component="button"
          type="button"
          onClick={onSelectAllAcross}
          sx={{ fontWeight: 'fontWeightSemiBold' }}
        >
          {t('approval_requests:bulk_actions.select_all_count', {
            count: totalCount,
          })}
        </Link>
      )}

      {isAllRows && (
        <Link
          component="button"
          type="button"
          onClick={onDeselectAll}
          sx={{ fontWeight: 'fontWeightSemiBold' }}
        >
          {t('general:deselect_all')}
        </Link>
      )}

      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
          ml: 'auto',
        }}
      >
        <Button
          variant="secondary"
          startIcon={<IconX size={16} />}
          onClick={onRejectClick}
          loading={isLoading}
          size="small"
          data-approval-menu-trigger
        >
          {t('approval_requests:bulk_actions.reject_selected')}
        </Button>
        <Button
          variant="primary"
          startIcon={<IconCheck size={16} />}
          onClick={onApproveClick}
          loading={isLoading}
          size="small"
          data-approval-menu-trigger
        >
          {t('approval_requests:bulk_actions.approve_selected')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default BulkSelectionBar;