import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { getSecureRelForTarget } from '../../services';
import { SoftText } from '../Text';
import { SoftTitle } from '../Title';
import { SoftBetaBadge } from '../Badge/beta_badge';
import { SoftCardSelect, SoftCardSelectableColor, } from './SoftCardSelect';
import makeId from '../form/form_row/make_id';
const textAlignToClassNameMap = {
    left: 'softCard--leftAligned',
    center: 'softCard--centerAligned',
    right: 'softCard--rightAligned',
};
export const ALIGNMENTS = Object.keys(textAlignToClassNameMap);
const layoutToClassNameMap = {
    vertical: '',
    horizontal: 'softCard--horizontal',
};
export const LAYOUT_ALIGNMENTS = Object.keys(layoutToClassNameMap);
const oneOfLayouts = PropTypes.oneOf(LAYOUT_ALIGNMENTS);
const cardLayout = (props, propName, componentName, ...rest) => {
    // @ts-ignore
    const oneOfResult = oneOfLayouts(props, propName, componentName, ...rest);
    if (oneOfResult)
        return oneOfResult;
    if (props[propName] === 'horizontal') {
        if (props.image || props.footer) {
            return new Error(`${componentName}: '${propName} = horizontal' cannot be used in conjunction with 'image', 'footer', or 'textAlign'.`);
        }
    }
};
export class SoftCard extends PureComponent {
    render() {
        let { className, description, title, titleElement, icon, image, footer, onClick, href, rel, target, textAlign, isClickable, betaBadgeLabel, betaBadgeTooltipContent, betaBadgeTitle, layout, bottomGraphic, selectable, ...rest } = this.props;
        const selectableColorClass = selectable
            ? `softCard--isSelectable--${SoftCardSelectableColor(selectable.color, selectable.isSelected)}`
            : undefined;
        const classes = classNames('softCard', textAlignToClassNameMap[textAlign], layoutToClassNameMap[layout], {
            'softCard--isClickable': onClick || href || isClickable,
            'softCard--hasBetaBadge': betaBadgeLabel,
            'softCard--hasIcon': icon,
            'softCard--hasBottomGraphic': bottomGraphic,
            'softCard--isSelectable': selectable,
            'softCard-isSelected': selectable && selectable.isSelected,
        }, selectableColorClass, className);
        const ariaId = makeId();
        let secureRel;
        if (href) {
            secureRel = getSecureRelForTarget({ href, target, rel });
        }
        let imageNode;
        if (image && layout === 'vertical') {
            imageNode = React.createElement("img", { className: "softCard__image", src: image, alt: "" });
        }
        let iconNode;
        if (icon) {
            iconNode = React.cloneElement(icon, {
                className: classNames(icon.props.className, 'softCard__icon'),
            });
        }
        let OuterElement = 'div';
        if (href) {
            OuterElement = 'a';
        }
        else if (onClick) {
            OuterElement = 'button';
        }
        let TitleElement = titleElement;
        if (OuterElement === 'button') {
            TitleElement = 'span';
        }
        let optionalCardTop;
        if (imageNode || iconNode) {
            optionalCardTop = (React.createElement("span", { className: "softCard__top" },
                imageNode,
                iconNode));
        }
        let optionalBetaBadge;
        if (betaBadgeLabel) {
            optionalBetaBadge = (React.createElement("span", { className: "softCard__betaBadgeWrapper" },
                React.createElement(SoftBetaBadge, { label: betaBadgeLabel, title: betaBadgeTitle, tooltipContent: betaBadgeTooltipContent, className: "softCard__betaBadge" })));
        }
        let optionalBottomGraphic;
        if (bottomGraphic) {
            optionalBottomGraphic = (React.createElement("span", { className: "softCard__graphic" }, bottomGraphic));
        }
        let optionalSelectButton;
        if (selectable) {
            if (bottomGraphic) {
                console.warn('softCard cannot support both `bottomGraphic` and `selectable`. It will ignore the bottomGraphic.');
            }
            optionalSelectButton = (React.createElement(SoftCardSelect, Object.assign({ "aria-describedby": `${ariaId}Title ${ariaId}Description` }, selectable)));
        }
        return (React.createElement(OuterElement, Object.assign({ onClick: onClick, className: classes, href: href, target: target, rel: secureRel }, rest),
            optionalBetaBadge,
            optionalCardTop,
            React.createElement("span", { className: "softCard__content" },
                React.createElement(SoftTitle, { id: `${ariaId}Title`, className: "softCard__title" },
                    React.createElement(TitleElement, null, title)),
                React.createElement(SoftText, { id: `${ariaId}Description`, size: "s", className: "softCard__description" },
                    React.createElement("p", null, description))),
            layout === 'vertical' && (React.createElement("span", { className: "softCard__footer" }, footer)),
            optionalSelectButton || optionalBottomGraphic));
    }
}
SoftCard.defaultProps = {
    textAlign: 'center',
    layout: 'vertical',
    titleElement: 'span',
};
//# sourceMappingURL=SoftCard.js.map