import React, { useState, useEffect } from "react";
import InfoIcon from "@mui/icons-material/Info";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";

export default function BulkActionBar({
  showBulkActionBar,
  bulkActionBarProps,
  onSelectAllRows,
  onClearSelection,
}) {
  return (
    <>
      {showBulkActionBar && (
        <div className="ia-bulk-action-bar">
          <span className="icon">
            {bulkActionBarProps?.enableSelectAll ? (
              <InfoIcon />
            ) : (
              <CheckCircleIcon />
            )}
          </span>
          <span className="ia-bulk-action-bar-text">
            {bulkActionBarProps?.actionBarLabel}
          </span>
          <span
            className="ia-bulk-action-bar-select-text"
            onClick={() => {
              if (bulkActionBarProps?.enableSelectAll) {
                onSelectAllRows?.();
              } else {
                onClearSelection?.();
              }
            }}
          >
            {bulkActionBarProps?.enableSelectAll
              ? `Select all ${bulkActionBarProps.totalRowCount} rows across all pages`
              : "Clear selection"}
          </span>
        </div>
      )}
    </>
  );
}
