import { useEffect } from 'react';
import { createPortal } from 'react-dom';
import { CircleCheckIcon, XIcon } from 'lucide-react';

import { getPortalContainer } from '../../lib/portal';

const SHOWN_MS = 6000;

/**
 * One line of confirmation at the bottom of the screen, gone by itself a
 * few seconds later. The editors have no toaster of their own (the block
 * editor's snackbar is not on the classic screens) and the app's would cost
 * every post edit screen forty kilobytes for one message, so this is the
 * whole of it, rendered in the portal the dialogs use.
 */
export const Toast = ({
  message,
  onDone,
}: {
  message: string | null;
  onDone: () => void;
}): JSX.Element | null => {
  useEffect(() => {
    if (message === null) return undefined;
    const timer = window.setTimeout(onDone, SHOWN_MS);
    return () => window.clearTimeout(timer);
  }, [message, onDone]);

  if (message === null) return null;

  return createPortal(
    <div
      role="status"
      className="recomaze-ui recomaze-editor fixed right-4 bottom-4 z-[100001] flex max-w-sm animate-in items-start gap-2 rounded-lg border border-border bg-popover px-3 py-2.5 text-sm text-popover-foreground shadow-lg fade-in slide-in-from-bottom-2"
    >
      <CircleCheckIcon className="mt-0.5 size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
      <span className="flex-1">{message}</span>
      <button
        type="button"
        onClick={onDone}
        aria-label="Dismiss"
        className="-mr-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground"
      >
        <XIcon className="size-3.5" />
      </button>
    </div>,
    getPortalContainer()
  );
};