import React from 'react';
import Content from './components/Content';
import Box from '../Box';
import Proportion from '../Proportion';
import { SIZES, DIRECTIONS } from './constants';
import { st, classes } from './MarketingLayout.st.css.js';
const imagePlaceholderAspectRatioBySize = {
    [SIZES.tiny]: 1,
    [SIZES.small]: 1,
    [SIZES.medium]: 282 / 188,
};
/** Marketing layout is a layout designed to promote new features or display first time visit.
 * Component has title, description, action and illustration areas. */
class MarketingLayout extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.renderImagePlaceholder = () => {
            const { size } = this.props;
            return (React.createElement(Proportion, { aspectRatio: imagePlaceholderAspectRatioBySize[size] },
                React.createElement("div", { className: classes.imagePlaceholder })));
        };
        this.getBorderRadiusProps = () => {
            const { inverted, direction, imagePadding } = this.props;
            if (direction === 'horizontal')
                return {
                    borderTopLeftRadius: !imagePadding && inverted ? 'inherit' : undefined,
                    borderTopRightRadius: !imagePadding && !inverted ? 'inherit' : undefined,
                    borderBottomLeftRadius: !imagePadding && inverted ? 'inherit' : undefined,
                    borderBottomRightRadius: !imagePadding && !inverted ? 'inherit' : undefined,
                };
            else
                return {};
        };
        this.renderImage = () => {
            const { image, imageBackgroundColor, inverted, size, direction, imagePadding, } = this.props;
            if (!image && !imageBackgroundColor) {
                return null;
            }
            return (React.createElement(Box, { key: "image", display: "flex", backgroundColor: imageBackgroundColor, justifyContent: "flex-end", className: st(classes.imageBackground), ...this.getBorderRadiusProps() },
                React.createElement("div", { className: st(classes.imageWrapper, {
                        size,
                        inverted,
                        direction,
                    }) }, typeof image === 'string' ? (React.createElement("img", { src: image, width: "100%" })) : (image || this.renderImagePlaceholder()))));
        };
        this.renderContent = () => {
            const { size, actions, title, description, badge, hiddenBadge, inverted, direction, imageBackgroundColor, } = this.props;
            return (React.createElement(Box, { key: "content", className: st(classes.contentWrapper, {
                    inverted,
                    size,
                    direction,
                    withImageBackground: !!imageBackgroundColor,
                }) },
                badge && !hiddenBadge && React.createElement("div", { className: classes.badge }, badge),
                React.createElement(Content, { size: size, actions: actions, title: title, description: description, badge: badge })));
        };
    }
    renderHorizontal() {
        const image = this.renderImage();
        const content = this.renderContent();
        return this.props.inverted ? [image, content] : [content, image];
    }
    renderVertical() {
        const image = this.props.image && this.renderImage();
        const content = this.renderContent();
        return this.props.inverted ? [content, image] : [image, content];
    }
    render() {
        const { size, badge, hiddenBadge, alignItems, inverted, actions, dataHook, imageBackgroundColor, direction, imagePadding, } = this.props;
        return (React.createElement("div", { className: st(classes.root, {
                size,
                badge: !!badge,
                hiddenBadge,
                alignItems,
                inverted,
                withActions: !!actions,
                withImageBackground: !!imageBackgroundColor,
                direction,
                imagePadding,
            }), style: this.getBorderRadiusProps(), "data-hook": dataHook }, direction === DIRECTIONS.vertical
            ? this.renderVertical()
            : this.renderHorizontal()));
    }
}
MarketingLayout.displayName = 'MarketingLayout';
MarketingLayout.defaultProps = {
    size: 'small',
    alignItems: 'center',
    inverted: false,
    direction: 'horizontal',
    hiddenBadge: false,
    imagePadding: true,
};
export default MarketingLayout;
//# sourceMappingURL=MarketingLayout.js.map