import type { StaleReason } from '../../hooks/useEditBaseline';
import { PAGE_OUT_OF_DATE_MESSAGE, RECORD_CHANGED_MESSAGE, RELOAD_DISCARDS_MESSAGE } from '../../utils/recordChanged';
import { TIMED_OUT_MAY_HAVE_SAVED } from '../../utils/saveOperation';

const SAYS: Record<StaleReason, string> = {
    changed: RECORD_CHANGED_MESSAGE,
    outOfDate: PAGE_OUT_OF_DATE_MESSAGE,
    unconfirmed: TIMED_OUT_MAY_HAVE_SAVED,
};

/**
 * The one notice for an opening that can save nothing more: what happened, in the standard words, that reloading
 * discards the unsaved changes, and Reload record. No comparison and no "keep mine": the record is reloaded, or the
 * person leaves (the editor's own Back or Close).
 */
export const StaleRecordNotice = ({ reason, message, actionLabel, onReload, reloading }: {
    reason?: StaleReason;
    /** Said instead of the standard words when the editor knows more (a save that stopped part way). */
    message?: string;
    /** The way on when there is no record to reload (a create that may have landed). */
    actionLabel?: string;
    onReload: () => void;
    reloading: boolean;
}) =>
    reason ? (
        // Held at the top of the scrolling form, so the reason Save is disabled stays in view on a long one.
        <div role="alert" className="sticky top-0 z-[1] mb-4 rounded-md border border-border bg-white p-2 text-sm">
            <p>{message ?? SAYS[reason]}</p>
            <p className="text-xs text-muted-foreground">{RELOAD_DISCARDS_MESSAGE}</p>
            <div className="mt-2 flex gap-2">
                <button type="button" className="btn btn-blue-sm" onClick={onReload} disabled={reloading}>
                    {reloading ? 'Reloading…' : (actionLabel ?? 'Reload record')}
                </button>
            </div>
        </div>
    ) : null;