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/FilterColumn";

const DataTable_TopToolbar = ({table, columns}) => {
    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',
                        }}
                    >
                        <FilterColumn columns={columns}/>
                        <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