"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaBase = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock/AnimateBlock.js"));
const grid_1 = require("../../gravity-blocks/grid/index.js");
const utils_1 = require("../../utils/index.js");
const Title_1 = tslib_1.__importDefault(require("../Title/Title.js"));
const MediaBaseContent_1 = tslib_1.__importDefault(require("./MediaBaseContent.js"));
const b = (0, utils_1.block)('media-base');
const Card = () => null;
const MediaBase = (props) => {
    const { children, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, onScroll, mediaOnlyColSizes = { all: 12, md: 8 }, ...mediaContentProps } = props;
    const { title, description } = mediaContentProps;
    const mediaSizes = React.useMemo(() => {
        return mediaOnly
            ? { [grid_1.GridColumnSize.All]: 12 }
            : { [grid_1.GridColumnSize.Md]: largeMedia ? 8 : 6, [grid_1.GridColumnSize.All]: 12 };
    }, [mediaOnly, largeMedia]);
    const contentSizes = React.useMemo(() => {
        return { [grid_1.GridColumnSize.Md]: largeMedia ? 4 : 6, [grid_1.GridColumnSize.All]: 12 };
    }, [largeMedia]);
    const mediaContent = !mediaOnly && (0, jsx_runtime_1.jsx)(MediaBaseContent_1.default, { ...mediaContentProps });
    const card = children.type === Card ? children?.props.children : null;
    return ((0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b(), onScroll: onScroll, animate: animated, children: [mediaOnly && ((0, jsx_runtime_1.jsx)(Title_1.default, { className: b('header'), title: title, subtitle: description, colSizes: mediaOnlyColSizes })), (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)(grid_1.Row, { className: b('row', {
                        reverse: direction === 'media-content',
                        'mobile-reverse': mobileDirection === 'media-content',
                    }), children: [(0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('content'), sizes: contentSizes, children: mediaContent }), card ? ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: mediaSizes, children: (0, jsx_runtime_1.jsx)("div", { className: b('card'), children: card }) })) : null] }) })] }));
};
exports.MediaBase = MediaBase;
exports.MediaBase.Card = Card;
exports.default = exports.MediaBase;
//# sourceMappingURL=MediaBase.js.map
