"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const getComponent_1 = require("../../getComponent");
const react_1 = tslib_1.__importDefault(require("react"));
/**
 * # 🤡 ComponentState
 *
 * A generic component to show different states of a screen or a view. For example,
 * you may need to:
 *
 * - Show a loading state when data is loading,
 * - Show an empty state when there is not data to show on a screen.
 * - Show an error message when an exception occurs during execution.
 *
 * These are just a few examples. This component displays a message with an image, a title,
 * a description and a call to action button.
 *
 * ## Usage
 * ```jsx
 * <ComponentState
 *  title="Looks like your'e new here!"
 *  description="Start by creating your first entry."
 *  imageSource="https://picsum.photos/200"
 *  styles={{ image: { width: 100, height: 100 } }}
 *  actionTitle="Tap to Create"
 * />
 * ```
 */
class ComponentState extends react_1.default.PureComponent {
    render() {
        const { actionOnPress, actionProps: _actionProps = {}, actionTitle, description, descriptionProps: _descriptionProps = {}, image, imageProps: _imageProps = {}, imageSource, title, titleProps: _titleProps = {}, } = this.props;
        const styles = this.props.styles;
        const actionProps = Object.assign({ color: 'primary' }, _actionProps, { onPress: actionOnPress });
        const descriptionProps = Object.assign({}, _descriptionProps, { children: description, style: [styles.description, _descriptionProps.style] });
        const titleProps = Object.assign({}, _titleProps, { children: title, style: [styles.title, _titleProps.style] });
        const imageProps = Object.assign({}, _imageProps, { source: imageSource || _imageProps.source, style: [styles.image, _imageProps.style] });
        return (react_1.default.createElement(getComponent_1.View, { style: styles.root },
            image
                ? react_1.default.createElement(getComponent_1.View, { style: styles.imageRoot }, image)
                : (imageSource
                    ? react_1.default.createElement(getComponent_1.View, { style: styles.imageRoot },
                        react_1.default.createElement(getComponent_1.BlueBaseImage, Object.assign({}, imageProps)))
                    : null),
            title ? react_1.default.createElement(getComponent_1.H6, Object.assign({}, titleProps)) : null,
            description ? react_1.default.createElement(getComponent_1.Body2, Object.assign({}, descriptionProps)) : null,
            actionTitle
                ? (react_1.default.createElement(getComponent_1.View, { style: styles.actionRoot },
                    react_1.default.createElement(getComponent_1.Button, Object.assign({}, actionProps), actionTitle)))
                : null));
    }
}
ComponentState.defaultStyles = (theme) => ({
    actionRoot: {
        marginTop: theme.spacing.unit,
    },
    description: {
        marginBottom: theme.spacing.unit,
        textAlign: 'center',
    },
    image: {
        height: 250,
        width: 250,
    },
    imageRoot: {
        marginBottom: theme.spacing.unit * 2,
    },
    root: {
        alignItems: 'center',
    },
    title: {
        marginBottom: theme.spacing.unit,
        textAlign: 'center',
    },
});
exports.ComponentState = ComponentState;
