import { lazy, Suspense, useRef } from 'react';

import type { CancelRef } from '#/features/composer/Composer';
import { COMPOSER_DIALOG_ID } from '#/features/composer/open-composer';

import * as Dialog from '#/components/Dialog';
import { composerDialogHandle } from '#/components/dialogs/handles';
import { Spinner } from '#/components/Spinner';

import { m } from '#/paraglide/messages';

import * as styles from './ComposerDialog.css';

// the composer pulls in a large subtree (gif/emoji pickers, reanimated, media metadata, drafts), so it
// only loads when the dialog is first opened — the `payload && ...` guard already gates mounting.
const ComposePost = lazy(() =>
	import('#/features/composer/Composer').then((mod) => ({ default: mod.ComposePost })),
);

export function ComposerDialog() {
	const cancelRef = useRef<CancelRef>(null);

	return (
		<Dialog.Root
			handle={composerDialogHandle}
			id={COMPOSER_DIALOG_ID}
			onOpenChange={(open, details) => {
				// Imperative closes (publish, Cancel button, confirmed discard) pass through; Base UI clears
				// the payload on close. ESC / backdrop-press route through ComposePost's cancel flow, which
				// vetoes the close (keeping the composer open) when it raises the discard prompt or closes a
				// sub-popup.
				if (!open && details.reason !== 'imperative-action' && cancelRef.current?.onPressCancel()) {
					details.cancel();
				}
			}}
		>
			{({ payload }) => (
				<Dialog.Popup scroll="body" label={m['common.compose.action.write']()}>
					{payload && (
						<Suspense
							fallback={
								<div className={styles.placeholder}>
									<Spinner color="default" label={m['common.status.loading']()} />
								</div>
							}
						>
							<ComposePost cancelRef={cancelRef} {...payload} />
						</Suspense>
					)}
				</Dialog.Popup>
			)}
		</Dialog.Root>
	);
}