import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { BackgroundImage, FileLink } from "../../components/index.js";
import { BREAKPOINTS } from "../../constants.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { useWindowWidth } from "../../gravity-blocks/context/windowWidthContext/index.js";
import { Col, Grid } from "../../gravity-blocks/grid/index.js";
import { Content } from "../../sub-blocks/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import './ContentLayout.css';
const b = block('content-layout-block');
function getFileTextSize(size) {
    switch (size) {
        case 's':
            return 's';
        case 'm':
        case 'l':
        case 'xl':
        default:
            return 'l';
    }
}
function getTextWidth(size) {
    switch (size) {
        case 's':
            return { all: 12, md: 6 };
        case 'l':
            return { all: 12, md: 12 };
        case 'm':
        default:
            return { all: 12, md: 8 };
    }
}
export const ContentLayoutBlock = (props) => {
    const windowWidth = useWindowWidth();
    const isMobile = windowWidth <= BREAKPOINTS.sm;
    const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
    const colSizes = React.useMemo(() => getTextWidth(textWidth), [textWidth]);
    const globalTheme = useTheme();
    const themedBackground = getThemedValue(background, globalTheme);
    return (_jsx(Grid, { children: _jsxs("div", { className: b({ size, theme, background: Boolean(background) }), children: [_jsx(Content, { className: b('content'), ...textContent, size: size, centered: centered, colSizes: colSizes, theme: theme }), fileContent && (_jsx(Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes, children: fileContent.map((file) => (_createElement(FileLink, { className: b('file'), ...file, key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme }))) })), background && (_jsx("div", { className: b('background'), children: _jsx(BackgroundImage, { className: b('background-item'), ...themedBackground, hide: isMobile }) }))] }) }));
};
export default ContentLayoutBlock;
//# sourceMappingURL=ContentLayout.js.map
