import React from "react";
import "./warn-button.scss";
import { Tooltip } from "../tooltip/Tooltip";
import { Button } from "../button/Button";
export const WarnButton = ({ message, icon, className, disabled, tooltip, iconOnly, onConfirmedClick, displayOptions, setDisplayOptions, withLabel, }) => {
    if (displayOptions === undefined || displayOptions === null) {
        ;
        [displayOptions, setDisplayOptions] = React.useState(false);
    }
    const viewAction = (React.createElement("div", { className: withLabel ? "warn-btn-group with-label" : "warn-btn-group", role: "group" },
        React.createElement("div", { className: "slide-in" },
            React.createElement(Button, { className: "btn-warn-component cancel", iconSize: "12px", iconOnly: iconOnly, icon: "fa fa-times", color: "#fff", backgroundColor: "#c00342", onClick: () => setDisplayOptions((currentState) => !currentState), size: "xsmall", label: "cancel" }),
            React.createElement(Button, { className: "btn-warn-component success", iconSize: "12px", icon: "fa fa-check", color: "#fff", iconOnly: iconOnly, backgroundColor: "#00b489", onClick: () => {
                    onConfirmedClick();
                    setDisplayOptions((currentState) => !currentState);
                }, size: "xsmall", label: "confirm" }))));
    const hideAction = (React.createElement("span", { className: disabled ? " disabled warn-btn-click" : "warn-btn-click" },
        React.createElement(Button, { className: "btn-warn-component", iconSize: "12px", icon: "fa " + icon, label: message, onClick: () => setDisplayOptions((currentState) => !currentState), disabled: disabled })));
    const button = displayOptions ? viewAction : hideAction;
    return (React.createElement("div", { className: "warn-btn " + (className || "") }, tooltip
        ? (React.createElement(Tooltip, { flow: "up", tooltip: tooltip }, button))
        : button));
};
