import { upperFirst } from 'lodash';
import * as React from 'react';
export const BaseActionContainer = ({ title, description, action, details }) => (React.createElement("div", { className: "action-container" },
    React.createElement("div", { className: "action-container__row" },
        React.createElement("div", { className: "action-container__description" },
            React.createElement("h4", { className: "action-container__title" }, title),
            description),
        React.createElement("div", { className: "action-container__btn-container" }, action)),
    details && React.createElement("div", { className: "action-container__row" }, details)));
/**
 * Displays an action button in a container with a title and description.
 */
export class ActionContainer extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            loading: false,
            flash: false,
        };
        this.onClick = () => {
            this.setState({
                error: undefined,
                loading: true,
            });
            this.props.run().then(() => {
                this.setState({ loading: false, flash: true });
                if (typeof this.timeoutHandle === 'number') {
                    window.clearTimeout(this.timeoutHandle);
                }
                this.timeoutHandle = window.setTimeout(() => this.setState({ flash: false }), 1000);
            }, err => this.setState({ loading: false, error: err.message }));
        };
    }
    componentWillUnmount() {
        if (this.timeoutHandle) {
            window.clearTimeout(this.timeoutHandle);
        }
    }
    render() {
        return (React.createElement(BaseActionContainer, { title: this.props.title, description: this.props.description, action: React.createElement(React.Fragment, null,
                React.createElement("button", { className: `btn ${this.props.buttonClassName || 'btn-primary'} action-container__btn`, onClick: this.onClick, "data-tooltip": this.props.buttonSubtitle, disabled: this.props.buttonDisabled || this.state.loading }, this.props.buttonLabel),
                this.props.buttonSubtitle && (React.createElement("div", { className: "action-container__btn-subtitle" },
                    React.createElement("small", null, this.props.buttonSubtitle))),
                !this.props.buttonSubtitle &&
                    this.props.flashText && (React.createElement("div", { className: 'action-container__flash' +
                        (this.state.flash ? ' action-container__flash--visible' : '') },
                    React.createElement("small", null, this.props.flashText)))), details: React.createElement(React.Fragment, null,
                this.state.error && (React.createElement("div", { className: "alert alert-danger mb-0 mt-3" },
                    "Error: ",
                    upperFirst(this.state.error))),
                !this.state.error && this.props.info) }));
    }
}
//# sourceMappingURL=ActionContainer.js.map