import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import AnimateBlock from "../AnimateBlock/AnimateBlock.js";
import { Col, Grid, GridColumnSize, Row } from "../../gravity-blocks/grid/index.js";
import { block } from "../../utils/index.js";
import Title from "../Title/Title.js";
import MediaContent from "./MediaBaseContent.js";
import './MediaBase.css';
const b = block('media-base');
const Card = () => null;
export 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
            ? { [GridColumnSize.All]: 12 }
            : { [GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12 };
    }, [mediaOnly, largeMedia]);
    const contentSizes = React.useMemo(() => {
        return { [GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12 };
    }, [largeMedia]);
    const mediaContent = !mediaOnly && _jsx(MediaContent, { ...mediaContentProps });
    const card = children.type === Card ? children?.props.children : null;
    return (_jsxs(AnimateBlock, { className: b(), onScroll: onScroll, animate: animated, children: [mediaOnly && (_jsx(Title, { className: b('header'), title: title, subtitle: description, colSizes: mediaOnlyColSizes })), _jsx(Grid, { children: _jsxs(Row, { className: b('row', {
                        reverse: direction === 'media-content',
                        'mobile-reverse': mobileDirection === 'media-content',
                    }), children: [_jsx(Col, { className: b('content'), sizes: contentSizes, children: mediaContent }), card ? (_jsx(Col, { sizes: mediaSizes, children: _jsx("div", { className: b('card'), children: card }) })) : null] }) })] }));
};
MediaBase.Card = Card;
export default MediaBase;
//# sourceMappingURL=MediaBase.js.map
