import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
import { Box, useMediaQuery } from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination";
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
import FilterColumn from "@/core/components/DataTable/filter";
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";

const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url, user_id, page_name, table_name }) => {
    const {
        getState,
        options: {
            enablePagination,
            enableToolbarInternalActions,
            muiTopToolbarProps,
            positionPagination,
            renderTopToolbarCustomActions,
        },
        refs: { topToolbarRef },
    } = table;
    const { isFullScreen, showGlobalFilter } = getState();

    const isMobile = useMediaQuery("(max-width:720px)");
    const isTablet = useMediaQuery("(max-width:1024px)");

    const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });

    const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || (showGlobalFilter && isTablet);

    return (
        <Box
            {...toolbarProps}
            ref={(ref) => {
                topToolbarRef.current = ref;
                if (toolbarProps?.ref) {
                    // @ts-ignore
                    toolbarProps.ref.current = ref;
                }
            }}
            sx={(theme) => ({
                ...getCommonToolbarStyles({ table, theme }),
                position: isFullScreen ? "sticky" : "relative",
                top: isFullScreen ? "0" : undefined,
                ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
            })}
        >
            <Box
                sx={{
                    alignItems: "flex-start",
                    boxSizing: "border-box",
                    display: "flex",
                    gap: "0.5rem",
                    justifyContent: "space-between",
                    p: "0.5rem",
                    position: stackAlertBanner ? "relative" : "absolute",
                    right: 0,
                    top: 0,
                    width: "100%",
                }}
            >
                {renderTopToolbarCustomActions?.({ table }) ?? <span />}
                {enableToolbarInternalActions && (
                    <Box
                        sx={{
                            alignItems: "center",
                            display: "flex",
                            flexWrap: "wrap-reverse",
                            gap: "0.5rem",
                            justifyContent: "flex-end",
                        }}
                    >
                        <RefactorTable mutate={mutate} />
                        {need_filter && (
                            <FilterColumn
                                columns={columns}
                                table_url={table_url}
                                user_id={user_id}
                                page_name={page_name}
                                table_name={table_name}
                            />
                        )}
                        <DataTable_ToolbarInternalButtons table={table} />
                    </Box>
                )}
            </Box>
            {enablePagination && ["both", "top"].includes(positionPagination ?? "") && (
                <DataTable_TablePagination position="top" table={table} />
            )}
            <DataTable_LinearProgressBar isTopToolbar table={table} />
        </Box>
    );
};

export default DataTable_TopToolbar;