import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
import styled, { css } from 'styled-components';
import Flex from '../../Flex';
import { useDirection, useElement } from '../../../hooks';
import useGridLayoutConfig from './config';
import { convertLtrToRtl, getBreakpointAndCols, getLastItemsInLayout, getRowHeight, useGridItemSorter, useMonitoredSize } from './utils';
import ReactGridLayoutStyles from './ReactGridLayoutStyles';
const StyledWrapper = styled(Flex) `
  block-size: 100%;
`;
const StyledEmptyFooter = styled.div `
  block-size: ${({ theme }) => `calc(${theme.base.spacing} * 2)`};
`;
const StyledAutoSizeItem = styled(Flex)(({ autoSize }) => {
    if (!autoSize)
        return '';
    return css `
    /* Overriding the inline style added by the RGL plugin. Needed to give the item a free height. */
    height: auto !important;

    /* Needed to maintain the extra gap at the bottom, since it's position absolute-ly */
    padding-bottom: 1rem;
  `;
});
/**
 * Wrapper on top of GridItems to forward ref, etc.
 * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles
 */
const ViewerGridItem = forwardRef(({ children, autoSize, direction, ...restProps }, ref) => (_jsx(StyledAutoSizeItem, { autoSize: autoSize, container: { direction: 'column' }, ref: ref, ...restProps, dir: direction, children: children })));
/**
 * Viewer component for a Grid created using GridLayoutEditor
 * @component
 */
const GridLayoutViewer = ({ children, layoutModel: layoutModelProp, rows, cols, autoSizeItemIDs = [], breakpoints }) => {
    // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width
    const [wrapperEl, setWrapperEl] = useElement();
    const size = useMonitoredSize(wrapperEl);
    const width = size?.width;
    const height = size?.height;
    const commonGridConfig = useGridLayoutConfig();
    const { breakpoint, numColumns } = useMemo(() => getBreakpointAndCols(width || 0, breakpoints, cols), [width, breakpoints, cols]);
    const { rowHeight } = useMemo(() => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModelProp), [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]);
    // On load, setting layoutModel based on the direction
    const { rtl } = useDirection();
    const layoutModel = useMemo(() => {
        if (rtl && layoutModelProp)
            return convertLtrToRtl(layoutModelProp, cols);
        return layoutModelProp;
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    // Callback to sort child DOM nodes to ensure an intuitive tabbing order
    const gridItemSorter = useGridItemSorter(layoutModelProp?.[breakpoint], numColumns);
    // Get list of last items in layout
    const lastItemsInLayout = useMemo(() => getLastItemsInLayout(layoutModel?.[breakpoint]), [breakpoint, layoutModel]);
    return (
    // Enforcing ltr here due to limitations of the RGL plugin.
    // The layout is mirrored using convertLtrToRtl above,
    // and then the direction is explicitly passed to items below.
    _jsxs(StyledWrapper, { ref: setWrapperEl, dir: 'ltr', children: [_jsx(ReactGridLayoutStyles, {}), !!width && !!height && (_jsxs(ResponsiveGridLayout, { ...commonGridConfig, width: width, rowHeight: Math.max(rowHeight, 50), layouts: layoutModel, isResizable: false, isDraggable: false, isDroppable: false, cols: cols, breakpoints: breakpoints, children: [children?.sort(gridItemSorter).map(child => {
                        const autoSize = autoSizeItemIDs.includes(child.key) && lastItemsInLayout.includes(child.key);
                        return (_jsx(ViewerGridItem, { autoSize: autoSize, direction: rtl ? 'rtl' : 'ltr', children: child }, child.key));
                    }), (!children || children.length === 0) && (
                    // Placeholder when no children. Needed to avoid exceptions:
                    // https://github.com/react-grid-layout/react-grid-layout/issues/216
                    _jsx("div", {}, '--'))] })), _jsx(StyledEmptyFooter, {})] }));
};
export default GridLayoutViewer;
//# sourceMappingURL=GridLayoutViewer.js.map