import React, { Fragment, useEffect, useState } from 'react';
import { classNames } from '../types';
import { Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/20/solid';
export const PHXNotifications = ({ className, show, type, onHide, failure, customMessage }) => {
    const [notify, setNotify] = useState(false);
    const [isFailure, setIsFailure] = useState(false);
    useEffect(() => {
        // @ts-ignore
        setNotify(show);
    }, [show]);
    useEffect(() => {
        // @ts-ignore
        if (failure) {
            setIsFailure(true);
        }
        else {
            setTimeout(() => {
                setIsFailure(false);
            }, 200);
        }
    }, [failure]);
    const hideNotify = () => {
        setNotify(false);
        if (onHide) {
            onHide();
        }
    };
    const message = type === 'add'
        ? 'Thêm mới thành công'
        : type === 'edit'
            ? 'Cập nhật thành công'
            : type === 'delete'
                ? 'Xóa bản ghi thành công'
                : customMessage;
    return (React.createElement("div", { "aria-live": 'assertive', className: `absolute pointer-events-none inset-0 flex items-center px-4 py-6 sm:items-start sm:p-6 ${className}` },
        React.createElement("div", { className: 'fixed bottom-10 left-0 mr-8 flex w-full flex-col items-center z-[60]' },
            React.createElement(Transition, { as: Fragment, enter: 'transform ease-out duration-500 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-500 sm:translate-y-0', leave: 'transition ease-in duration-500', leaveFrom: 'translate-y-0 opacity-500 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', show: notify },
                React.createElement("div", { className: classNames('pointer-events-auto max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', isFailure ? 'bg-red-600' : 'bg-indigo-800') },
                    React.createElement("div", { className: 'p-3' },
                        React.createElement("div", { className: 'flex items-center justify-between' },
                            React.createElement("div", { className: 'ml-1' },
                                React.createElement("p", { className: 'text-xs font-normal text-white' }, isFailure && type === 'custom' ? message : isFailure ? 'Lỗi, vui lòng thử lại sau' : message)),
                            React.createElement("div", { className: 'ml-4 flex pt-0.5' },
                                React.createElement("button", { className: 'inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500', onClick: () => hideNotify(), type: 'button' },
                                    React.createElement("span", { className: 'sr-only' }, "Close"),
                                    React.createElement(XMarkIcon, { "aria-hidden": 'true', className: classNames('h-4 w-4 text-white', isFailure ? 'bg-red-600' : 'bg-indigo-800') }))))))))));
};
//# sourceMappingURL=Notifications.js.map