import {
  getCommonToolbarStyles,
  parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { Box, alpha, useMediaQuery } from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination";

const DataTable_BottomToolbar = ({ table, ...rest }) => {
  const {
    getState,
    options: {
      enablePagination,
      muiBottomToolbarProps,
      positionPagination,
      renderBottomToolbarCustomActions,
    },
    refs: { bottomToolbarRef },
  } = table;
  const { isFullScreen } = getState();

  const isMobile = useMediaQuery("(max-width:720px)");
  const toolbarProps = {
    ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
    ...rest,
  };

  const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
  return (
    <Box
      {...toolbarProps}
      ref={(node) => {
        if (node) {
          bottomToolbarRef.current = node;
          if (toolbarProps?.ref) {
            // @ts-ignore
            toolbarProps.ref.current = node;
          }
        }
      }}
      sx={(theme) => ({
        ...getCommonToolbarStyles({ table, theme }),
        bottom: isFullScreen ? "0" : undefined,
        boxShadow: `0 1px 2px -1px ${alpha(theme.palette.grey[700], 0.5)} inset`,
        left: 0,
        position: isFullScreen ? "fixed" : "relative",
        right: 0,
        ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
      })}
    >
      <DataTable_LinearProgressBar isTopToolbar={false} table={table} />
      <Box
        sx={{
          alignItems: "center",
          boxSizing: "border-box",
          display: "flex",
          justifyContent: "space-between",
          p: "0.5rem",
          width: "100%",
        }}
      >
        {renderBottomToolbarCustomActions ? (
          renderBottomToolbarCustomActions({ table })
        ) : (
          <span />
        )}
        <Box
          sx={{
            display: "flex",
            justifyContent: "flex-end",
            position: stackAlertBanner ? "relative" : "absolute",
            right: 0,
            top: 0,
          }}
        >
          {enablePagination &&
            ["both", "bottom"].includes(positionPagination ?? "") && (
              <DataTable_TablePagination position="bottom" table={table} />
            )}
        </Box>
      </Box>
    </Box>
  );
};
export default DataTable_BottomToolbar;