import { ButtonStyleType } from "../Button/Button";
import Icon from "../Icon/Icon";
import ConfirmModal from "../Modal/ConfirmModal";
import MoreMenu from "../MoreMenu/MoreMenu";
import MoreMenuItem from "../MoreMenu/MoreMenuItem";
import MoreMenuDivider from "../MoreMenu/Divider";
import ProgressBar, { ProgressBarSize } from "../ProgressBar/ProgressBar";
import { Green, Red } from "../../../Types/BrandColors";
import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
import IconProp from "../../../Types/Icon/IconProp";
import React from "react";
const isDangerStyle = (style) => {
    return (style === ButtonStyleType.DANGER ||
        style === ButtonStyleType.DANGER_OUTLINE ||
        style === ButtonStyleType.HOVER_DANGER_OUTLINE);
};
const BulkUpdateForm = (props) => {
    const [confirmModalProps, setConfirmModalProps] = React.useState(null);
    const [progressInfo, setProgressInfo] = React.useState(null);
    const [showProgressInfoModal, setShowProgressInfoModal] = React.useState(false);
    const [actionInProgress, setActionInProgress] = React.useState(false);
    if (props.selectedItems.length === 0) {
        return React.createElement(React.Fragment, null);
    }
    const visibleButtons = (props.buttons || []).filter((button) => {
        if (button.isVisible) {
            return button.isVisible(props.selectedItems) !== false;
        }
        return true;
    });
    const safeButtons = visibleButtons.filter((b) => {
        return !isDangerStyle(b.buttonStyleType);
    });
    const dangerButtons = visibleButtons.filter((b) => {
        return isDangerStyle(b.buttonStyleType);
    });
    const triggerButtonClick = (button) => {
        if (button.disabled) {
            return;
        }
        const buttonClickObject = {
            items: props.selectedItems,
            onProgressInfo: (info) => {
                setProgressInfo(info);
            },
            onBulkActionStart: () => {
                setShowProgressInfoModal(true);
                setProgressInfo({
                    inProgressItems: props.selectedItems,
                    successItems: [],
                    failed: [],
                    totalItems: props.selectedItems,
                });
                setActionInProgress(true);
                if (props.onActionStart) {
                    props.onActionStart();
                }
            },
            onBulkActionEnd: () => {
                setActionInProgress(false);
            },
        };
        if (button.confirmMessage) {
            setConfirmModalProps({
                title: button.confirmTitle
                    ? button.confirmTitle(props.selectedItems)
                    : "Confirm",
                description: button.confirmMessage(props.selectedItems),
                submitButtonType: button.confirmButtonStyleType,
                submitButtonText: button.title,
                onClose: () => {
                    setConfirmModalProps(null);
                },
                onSubmit: async () => {
                    await button.onClick(buttonClickObject);
                },
            });
            return;
        }
        if (button.onClick) {
            void button.onClick(buttonClickObject);
        }
    };
    const renderMenuItem = (button, index) => {
        const isDanger = isDangerStyle(button.buttonStyleType);
        const isDisabled = Boolean(button.disabled);
        let itemClassName = "";
        let iconClassName = "";
        if (isDisabled) {
            itemClassName = "opacity-50 cursor-not-allowed hover:bg-transparent";
        }
        else if (isDanger) {
            itemClassName = "text-red-700 hover:text-red-800 hover:bg-red-50";
            iconClassName = "text-red-400 group-hover:text-red-500";
        }
        return (React.createElement(MoreMenuItem, { key: `bulk-action-${index}`, text: button.title, icon: button.icon, className: itemClassName, iconClassName: iconClassName, onClick: () => {
                triggerButtonClick(button);
            } }));
    };
    const showProgressInfo = () => {
        if (actionInProgress && progressInfo) {
            return (React.createElement("div", { className: "space-y-4" },
                React.createElement("p", { className: "text-sm text-gray-500" }, "Please wait while the bulk action is being performed. This may take a moment."),
                React.createElement(ProgressBar, { count: progressInfo.successItems.length + progressInfo.failed.length, totalCount: progressInfo.totalItems.length, suffix: props.pluralLabel, size: ProgressBarSize.Small })));
        }
        if (!actionInProgress && progressInfo) {
            const hasFailures = progressInfo.failed.length > 0;
            const hasSuccesses = progressInfo.successItems.length > 0;
            return (React.createElement("div", { className: "space-y-4" },
                React.createElement("div", { className: "flex flex-col space-y-3" },
                    hasSuccesses && (React.createElement("div", { className: "flex items-center rounded-lg bg-green-50 p-3" },
                        React.createElement(Icon, { className: "h-5 w-5 flex-shrink-0", icon: IconProp.CheckCircle, color: Green }),
                        React.createElement("div", { className: "ml-2 text-sm font-medium text-green-800" },
                            progressInfo.successItems.length,
                            " ",
                            progressInfo.successItems.length === 1
                                ? props.singularLabel
                                : props.pluralLabel,
                            " ",
                            "succeeded"))),
                    hasFailures && (React.createElement("div", { className: "flex items-center rounded-lg bg-red-50 p-3" },
                        React.createElement(Icon, { className: "h-5 w-5 flex-shrink-0", icon: IconProp.Close, color: Red }),
                        React.createElement("div", { className: "ml-2 text-sm font-medium text-red-800" },
                            progressInfo.failed.length,
                            " ",
                            progressInfo.failed.length === 1
                                ? props.singularLabel
                                : props.pluralLabel,
                            " ",
                            "failed")))),
                hasFailures && (React.createElement("div", { className: "rounded-lg border border-gray-200 overflow-hidden" },
                    React.createElement("div", { className: "max-h-64 overflow-y-auto divide-y divide-gray-200" }, progressInfo.failed.map((failedItem, i) => {
                        const itemName = props.itemToString
                            ? props.itemToString(failedItem.item)
                            : "";
                        return (React.createElement("div", { className: "px-4 py-3 text-sm", key: i },
                            itemName && (React.createElement("div", { className: "font-medium text-gray-900" }, itemName)),
                            React.createElement("div", { className: "text-gray-500 mt-0.5" }, failedItem.failedMessage)));
                    }))))));
        }
        return React.createElement(React.Fragment, null);
    };
    const menuChildren = [];
    safeButtons.forEach((button, index) => {
        menuChildren.push(renderMenuItem(button, index));
    });
    if (safeButtons.length > 0 && dangerButtons.length > 0) {
        menuChildren.push(React.createElement(MoreMenuDivider, { key: "bulk-action-divider" }));
    }
    dangerButtons.forEach((button, index) => {
        menuChildren.push(renderMenuItem(button, safeButtons.length + index));
    });
    const showLimitWarning = props.isAllItemsSelected &&
        props.selectedItems.length === LIMIT_PER_PROJECT;
    return (React.createElement("div", null,
        React.createElement("div", null,
            React.createElement("div", { className: "mt-5 mb-5 bg-gray-50 rounded-xl p-4 border-2 border-gray-100" },
                React.createElement("div", { className: "flex items-center justify-between gap-3 flex-wrap" },
                    React.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
                        React.createElement("div", { className: "inline-flex items-center gap-1.5 rounded-lg bg-indigo-50 px-3 py-1.5 text-sm font-semibold text-indigo-700 border border-indigo-100" },
                            React.createElement(Icon, { icon: IconProp.CheckCircle, className: "h-4 w-4 text-indigo-600" }),
                            React.createElement("span", null,
                                props.selectedItems.length,
                                " ",
                                props.pluralLabel,
                                " Selected")),
                        React.createElement("div", { className: "h-6 w-px bg-gray-300 mx-1" }),
                        !props.isAllItemsSelected && (React.createElement("button", { type: "button", onClick: () => {
                                props.onSelectAllClick();
                            }, className: "inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-indigo-50 hover:border-indigo-300 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer select-none" },
                            React.createElement(Icon, { icon: IconProp.CheckCircle, className: "h-3.5 w-3.5" }),
                            React.createElement("span", null,
                                "Select All ",
                                props.pluralLabel))),
                        React.createElement("button", { type: "button", onClick: () => {
                                props.onClearSelectionClick();
                            }, className: "inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-red-50 hover:border-red-300 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer select-none" },
                            React.createElement(Icon, { icon: IconProp.Close, className: "h-3.5 w-3.5" }),
                            React.createElement("span", null, "Clear Selection"))),
                    React.createElement("div", { className: "flex items-center" }, menuChildren.length > 0 && (React.createElement(MoreMenu, { elementToBeShownInsteadOfButton: React.createElement("div", { className: "inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer select-none" },
                            React.createElement(Icon, { icon: IconProp.Bolt, className: "h-4 w-4 text-gray-500" }),
                            React.createElement("span", null, "Bulk Actions"),
                            React.createElement(Icon, { icon: IconProp.ChevronDown, className: "h-3.5 w-3.5 text-gray-400 ml-0.5" })) }, menuChildren)))),
                showLimitWarning && (React.createElement("div", { className: "mt-2 text-xs text-gray-500" },
                    "You can only select ",
                    LIMIT_PER_PROJECT,
                    " ",
                    props.pluralLabel,
                    " at a time. This is for performance reasons.")))),
        confirmModalProps && (React.createElement(ConfirmModal, Object.assign({}, confirmModalProps, { onSubmit: () => {
                confirmModalProps.onSubmit();
                setConfirmModalProps(null);
            } }))),
        showProgressInfoModal && progressInfo && (React.createElement(ConfirmModal, { title: actionInProgress ? "In Progress" : "Completed", description: React.createElement("div", null, showProgressInfo()), submitButtonType: ButtonStyleType.NORMAL, disableSubmitButton: actionInProgress, submitButtonText: "Close", onSubmit: () => {
                setShowProgressInfoModal(false);
                if (props.onActionEnd) {
                    props.onActionEnd();
                }
            } }))));
};
export default BulkUpdateForm;
//# sourceMappingURL=BulkUpdateForm.js.map