import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
const Icons = {
    info: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16v-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M12 8h.01", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] })),
    success: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M8 12l2.5 2.5L15.5 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })),
    warning: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })] })),
    error: (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
};
const defaultProps = {
    title: 'Thông báo',
    type: 'info',
    confirmButtonText: 'OK',
    cancelButtonText: 'Hủy',
};
export const NotificationModal = ({ isOpen, title = defaultProps.title, message, onConfirm, onCancel, type = defaultProps.type, confirmButtonText = defaultProps.confirmButtonText, cancelButtonText = defaultProps.cancelButtonText, }) => {
    const [isAnimating, setIsAnimating] = useState(false);
    const getTypeStyles = () => {
        switch (type) {
            case 'success':
                return { bg: '#d4edda', border: '#c3e6cb', text: '#155724' };
            case 'warning':
                return { bg: '#fff3cd', border: '#ffeeba', text: '#856404' };
            case 'error':
                return { bg: '#f8d7da', border: '#f5c6cb', text: '#721c24' };
            default:
                return { bg: '#e2e3e5', border: '#d6d8db', text: '#383d41' };
        }
    };
    const styles = getTypeStyles();
    const getAnimationClass = () => {
        if (!isOpen)
            return 'opacity-0 translate-y-4';
        if (isAnimating && onCancel)
            return 'animate-fade-out';
        return 'animate-fade-in';
    };
    const handleConfirm = () => {
        setIsAnimating(true);
        onConfirm?.();
        setTimeout(() => setIsAnimating(false), 300);
    };
    const handleCancel = () => {
        setIsAnimating(true);
        onCancel?.();
        setTimeout(() => setIsAnimating(false), 300);
    };
    if (!isOpen)
        return null;
    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4", children: _jsxs("div", { className: `bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 ${getAnimationClass()}`, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "modal-title", "aria-describedby": "modal-message", children: [_jsx("div", { className: `p-6 border-b ${styles.border}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [type === 'success' && _jsx(Icons.success, { className: "w-5 h-5 text-green-600" }), type === 'warning' && _jsx(Icons.warning, { className: "w-5 h-5 text-yellow-600" }), type === 'error' && _jsx(Icons.error, { className: "w-5 h-5 text-red-600" }), type === 'info' && _jsx(Icons.info, { className: "w-5 h-5 text-blue-600" }), _jsx("h2", { id: "modal-title", className: `text-xl font-semibold ${styles.text}`, children: title })] }) }), _jsx("div", { className: "p-6", children: _jsx("p", { id: "modal-message", className: "text-gray-700 leading-relaxed", children: message }) }), _jsxs("div", { className: `px-6 py-4 flex justify-end gap-3 border-t ${styles.border}`, children: [onCancel && (_jsx("button", { onClick: handleCancel, className: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors", children: cancelButtonText })), onConfirm && (_jsx("button", { onClick: handleConfirm, className: `px-4 py-2 text-white rounded-md font-medium transition-colors ${type === 'error'
                                ? 'bg-red-600 hover:bg-red-700'
                                : 'bg-blue-600 hover:bg-blue-700'}`, children: confirmButtonText }))] })] }) }));
};
export const useNotificationModal = () => {
    const [modalState, setModalState] = useState(null);
    const openModal = (title, message, type = 'info', onConfirm, onCancel) => {
        setModalState({
            isOpen: true,
            title,
            message,
            type,
            onConfirm,
            onCancel,
        });
        const timer = setTimeout(() => {
            if (onCancel) {
                setModalState((prev) => ({ ...prev, isOpen: false }));
            }
        }, 5000);
        return () => clearTimeout(timer);
    };
    const closeModal = () => {
        setModalState((prev) => prev ? { ...prev, isOpen: false } : null);
    };
    return {
        modalState,
        openModal,
        closeModal,
    };
};
export default NotificationModal;
//# sourceMappingURL=NotificationModal.js.map