"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const classnames_1 = __importDefault(require("classnames"));
const React = __importStar(require("react"));
const react_jss_1 = __importDefault(require("react-jss"));
const types_1 = require("../../types");
const Button_1 = require("../Button");
const Icon_1 = require("../Icon");
const ModalWrapper_1 = require("../ModalWrapper");
const styles = (theme) => types_1.createStyles({
    container: {
        position: 'relative',
        width: 400,
        maxHeight: 500,
        backgroundColor: theme.$bodyBkg,
        borderRadius: 5,
    },
    header: {
        width: '100%',
        padding: (({ applicationIcon, title, description }) => {
            if (applicationIcon) {
                return '70px 20px 20px';
            }
            if (title || description) {
                return '20px';
            }
            return '0px';
        }),
        textAlign: 'center',
        backgroundColor: theme.colors.gray.light,
        boxSizing: 'border-box',
        borderRadius: [5, 5, 0, 0],
    },
    applicationIcon: {
        display: (({ applicationIcon }) => applicationIcon ? 'initial' : 'none'),
        position: 'absolute',
        top: -45,
        left: 'calc(50% - 45px)',
        width: 90,
        height: 90,
        backgroundImage: (({ applicationIcon }) => `url('${applicationIcon}')`),
        backgroundColor: (({ themeColor }) => themeColor || '#000000'),
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%',
        backgroundPosition: 'center',
        borderRadius: '100%',
        border: '3px solid white',
    },
    title: Object.assign({}, theme.fontMixin(18, 500), { color: theme.colors.black, marginBottom: 5 }),
    description: Object.assign({}, theme.fontMixin(13), { color: '#292929', opacity: .4 }),
    body: {
        color: theme.colors.black,
        position: 'relative',
        padding: 20,
    },
    '@keyframes spin': {
        '100%': { transform: 'rotate(360deg)' },
    },
    loading: Object.assign({}, theme.mixins.flexbox.containerCenter, theme.mixins.position('absolute', 0, 0), theme.mixins.size('100%'), { backgroundColor: 'rgba(255, 255, 255, 1)', '& svg': {
            animation: `spin 1s linear infinite`,
        } }),
    footer: {
        whiteSpace: 'nowrap',
        display: 'flex',
        justifyContent: 'space-between',
        padding: 20,
        '& button': {
            flexBasis: ({ onContinue }) => onContinue ? '48%' : '100%',
            marginLeft: 5,
        },
    },
});
class ModalImpl extends React.PureComponent {
    render() {
        const { classes, title, description, classNameModalBody, onCancel, cancelContent, onContinue, continueContent, isLoading, children, continueDanger, onWrapperCancel, disableWrapperClick, } = this.props;
        return (React.createElement(ModalWrapper_1.ModalWrapper, { onCancel: (disableWrapperClick) ? undefined : (onWrapperCancel || onCancel) },
            React.createElement("div", { className: classes.container },
                React.createElement("div", { className: classes.header },
                    React.createElement("div", { className: classes.applicationIcon }),
                    React.createElement("div", { className: classes.title }, title),
                    React.createElement("div", { className: classes.description }, description)),
                React.createElement("div", { className: classnames_1.default(classes.body, classNameModalBody) },
                    isLoading &&
                        React.createElement("div", { className: classes.loading },
                            React.createElement(Icon_1.Icon, { symbolId: Icon_1.IconSymbol.LOADING, size: 25, color: '#000' })),
                    children),
                (onCancel || onContinue) &&
                    React.createElement("div", { className: classes.footer },
                        onCancel &&
                            React.createElement(Button_1.Button, { onClick: onCancel, btnStyle: Button_1.Style.TERTIARY }, cancelContent || `Cancel`),
                        onContinue &&
                            React.createElement(Button_1.Button, { onClick: onContinue, btnStyle: continueDanger ? Button_1.Style.DANGER : Button_1.Style.PRIMARY }, continueContent || `OK`)))));
    }
}
exports.Modal = react_jss_1.default(styles)(ModalImpl);
//# sourceMappingURL=index.js.map