'use client';
import clsx from 'clsx';
import { MdOutlineWatchLater } from 'react-icons/md';
import { RiDownloadLine, RiMessageLine } from 'react-icons/ri';
import { Each, Show } from '../../00-base';
import { Paragraph, Spinner } from '../../01-atoms';
const iconStyleMap = {
    download: 'bg-error/20 text-error mt-0.5 shrink-0 rounded p-1',
    action: 'bg-warning/20 text-warning mt-0.5 shrink-0 rounded p-1',
    link: 'bg-success/20 text-success mt-0.5 shrink-0 rounded p-1',
};
function NotificationIcon({ type }) {
    const className = iconStyleMap[type];
    if (type === 'download')
        return <RiDownloadLine size={26} className={className}/>;
    if (type === 'action')
        return <MdOutlineWatchLater size={26} className={className}/>;
    return <RiMessageLine size={26} className={className}/>;
}
function formatDate(dateStr) {
    const date = new Date(dateStr);
    const today = new Date();
    if (date.toDateString() === today.toDateString())
        return 'Hoy';
    return `${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}`;
}
export function NotificationPanel({ isOpen, onClose, notifications, isLoading, total, onLoadMore, }) {
    if (!isOpen)
        return null;
    return (<>
      <div className="fixed inset-0 z-40" onClick={onClose}/>

      <div className="absolute top-full right-0 z-50 mt-2 flex max-h-[50vh] w-110 flex-col overflow-hidden rounded-xl bg-white shadow-[0px_0px_17px_-4px]">
        <div className="flex shrink-0 items-center justify-between border-b border-gray-4 p-4">
          <Paragraph size="subtitle-1">Mensajes</Paragraph>
          <button onClick={onClose} aria-label="Cerrar" className="cursor-pointer text-gray-2 w-7 hover:text-gray-1 hover:bg-gray-3/50 rounded-4xl p-1">
            ✕
          </button>
        </div>

        <div className="flex-1 overflow-y-auto">
          <Show>
            <Show.When isTrue={isLoading}>
              <div className="flex justify-center p-4">
                <Spinner />
              </div>
            </Show.When>
            <Show.Else>
              <Show>
                <Show.When isTrue={notifications.length === 0}>
                  <div className="p-4 text-center">
                    <Paragraph size="body-2" className="text-gray-1">
                      No tienes mensajes
                    </Paragraph>
                  </div>
                </Show.When>
                <Show.Else>
                  <Each of={notifications} render={(notification, i) => (<div key={notification.id} onClick={notification.action.type !== 'download'
                ? notification.action.handler
                : undefined} className={clsx('mx-2 my-1 flex cursor-pointer items-center gap-2 rounded-lg p-2', i % 2 === 0 && 'bg-gray-6/80', 'hover:bg-gray-5')}>
                        <div className="flex w-full items-start gap-2 rounded-lg p-2">
                          <span className={clsx('relative h-2 w-2 shrink-0 transition-opacity duration-300', notification.readAt ? 'opacity-0' : 'opacity-100')}>
                            <span className="bg-info absolute mt-2 inline-flex h-full w-full animate-ping rounded-full opacity-75"/>
                            <span className="bg-info/50 relative inline-flex h-2 w-2 rounded-full"/>
                          </span>

                          <NotificationIcon type={notification.action.type}/>

                          <div className="min-w-0 flex-1">
                            <div className="flex items-start justify-between gap-2">
                              <Paragraph size="subtitle-2" className="text-black capitalize">
                                {notification.title}
                              </Paragraph>
                              <Paragraph size="body-2" className="shrink-0 text-gray-2">
                                {formatDate(notification.createdAt)}
                              </Paragraph>
                            </div>

                            <Show.When isTrue={!!notification.message}>
                              <Paragraph size="body-2" className="text-gray-1">
                                {notification.message}
                              </Paragraph>
                            </Show.When>

                            <Show.When isTrue={notification.action.type === 'download'}>
                              <button onClick={notification.action.handler} className="text-info mt-1 flex cursor-pointer items-center gap-1 text-xs underline">
                                <RiDownloadLine size={14}/>
                                Descargar reporte
                              </button>
                            </Show.When>
                          </div>
                        </div>
                      </div>)}/>
                </Show.Else>
              </Show>
            </Show.Else>
          </Show>
        </div>

        <Show.When isTrue={total > notifications.length}>
          <div className="shrink-0 border-t border-gray-4 p-3 text-center">
            <button onClick={onLoadMore} className="text-info cursor-pointer text-sm font-bold">
              Ver más ({total - notifications.length} restantes)
            </button>
          </div>
        </Show.When>
      </div>
    </>);
}
//# sourceMappingURL=NotificationPanel.jsx.map