"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressNotification = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * ProgressNotification Component
 *
 * A notification that shows progress of an operation
 */
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
/**
 * ProgressNotification component
 * @param {Object} props - Component props
 * @param {string} props.title - Notification title
 * @param {React.ReactNode} props.message - Notification message
 * @param {number} props.progress - Progress value (0-100)
 * @param {string} props.status - Status (pending, in-progress, complete, error)
 * @param {Function} props.onClose - Close handler
 * @param {number} props.autoCloseDelay - Auto-close delay in ms when complete (0 to disable)
 * @param {boolean} props.showCloseButton - Whether to show a close button
 * @param {Function} props.onCancel - Cancel handler
 * @param {boolean} props.isCancellable - Whether the operation can be cancelled
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @returns {React.ReactElement|null} ProgressNotification component or null if closed
 */
const ProgressNotification = ({ title, message, progress = 0, status = 'pending', onClose, autoCloseDelay = 3000, showCloseButton = true, onCancel, isCancellable = false, className = '', style = {}, ...rest }) => {
    // State
    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
    const [formattedProgress, setFormattedProgress] = (0, react_1.useState)(progress);
    // Auto-close effect when complete
    (0, react_1.useEffect)(() => {
        if (status === 'complete' && autoCloseDelay > 0) {
            const timer = setTimeout(() => {
                handleClose();
            }, autoCloseDelay);
            return () => clearTimeout(timer);
        }
    }, [status, autoCloseDelay]);
    // Update formatted progress
    (0, react_1.useEffect)(() => {
        // Ensure progress is between 0 and 100
        const validProgress = Math.min(100, Math.max(0, progress));
        setFormattedProgress(validProgress);
    }, [progress]);
    // Close handler
    const handleClose = () => {
        setIsVisible(false);
        // Wait for animation to complete
        setTimeout(() => {
            if (onClose)
                onClose();
        }, 300);
    };
    // Cancel handler
    const handleCancel = () => {
        if (onCancel)
            onCancel();
    };
    // Don't render if not visible
    if (!isVisible)
        return null;
    // Get icon based on status
    const getIcon = () => {
        switch (status) {
            case 'complete':
                return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), (0, jsx_runtime_1.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
            case 'error':
                return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), (0, jsx_runtime_1.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }));
            case 'pending':
                return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("polyline", { points: "12 6 12 12 16 14" })] }));
            case 'in-progress':
            default:
                return ((0, jsx_runtime_1.jsx)("div", { className: "bf-progress-notification__spinner", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }) }) }));
        }
    };
    // Determine progress bar style
    const getProgressBarStyle = () => {
        return {
            width: `${formattedProgress}%`,
            transition: 'width 0.3s ease-in-out'
        };
    };
    // Get status text
    const getStatusText = () => {
        switch (status) {
            case 'complete':
                return 'Complete';
            case 'error':
                return 'Error';
            case 'pending':
                return 'Pending';
            case 'in-progress':
            default:
                return `${formattedProgress}% Complete`;
        }
    };
    // Classes
    const notificationClasses = [
        'bf-progress-notification',
        `bf-progress-notification--${status}`,
        isVisible ? 'bf-progress-notification--visible' : 'bf-progress-notification--hidden',
        className
    ].filter(Boolean).join(' ');
    // Render
    return ((0, jsx_runtime_1.jsxs)("div", { className: notificationClasses, style: style, role: "alert", "aria-live": "polite", ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "bf-progress-notification__icon", children: getIcon() }), (0, jsx_runtime_1.jsxs)("div", { className: "bf-progress-notification__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bf-progress-notification__header", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "bf-progress-notification__title", children: title })), showCloseButton && ((0, jsx_runtime_1.jsx)("button", { className: "bf-progress-notification__close-button", onClick: handleClose, "aria-label": "Close notification", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }), message && ((0, jsx_runtime_1.jsx)("div", { className: "bf-progress-notification__message", children: message })), (0, jsx_runtime_1.jsx)("div", { className: "bf-progress-notification__progress-container", children: (0, jsx_runtime_1.jsx)("div", { className: `bf-progress-notification__progress-bar bf-progress-notification__progress-bar--${status}`, style: getProgressBarStyle(), role: "progressbar", "aria-valuenow": formattedProgress, "aria-valuemin": "0", "aria-valuemax": "100" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bf-progress-notification__status", children: [(0, jsx_runtime_1.jsx)("span", { className: "bf-progress-notification__status-text", children: getStatusText() }), isCancellable && status !== 'complete' && status !== 'error' && ((0, jsx_runtime_1.jsx)("button", { className: "bf-progress-notification__cancel-button", onClick: handleCancel, "aria-label": "Cancel operation", children: "Cancel" }))] })] })] }));
};
exports.ProgressNotification = ProgressNotification;
exports.ProgressNotification.propTypes = {
    title: prop_types_1.default.string,
    message: prop_types_1.default.node,
    progress: prop_types_1.default.number,
    status: prop_types_1.default.oneOf(['pending', 'in-progress', 'complete', 'error']),
    onClose: prop_types_1.default.func,
    autoCloseDelay: prop_types_1.default.number,
    showCloseButton: prop_types_1.default.bool,
    onCancel: prop_types_1.default.func,
    isCancellable: prop_types_1.default.bool,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object
};
exports.default = exports.ProgressNotification;
//# sourceMappingURL=ProgressNotification.js.map