import { lazy, Suspense } from 'react';

import type { ComposerImage } from '#/lib/media/composer-image';

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

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

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

export type EditImageDialogProps = {
	handle: Dialog.DialogHandle;
	image?: ComposerImage;
	onChange: (next: ComposerImage) => void;
	aspectRatio?: number;
	circularCrop?: boolean;
};

const EditImageDialogInner = lazy(() =>
	import('./EditImageDialogInner').then((mod) => ({ default: mod.EditImageDialogInner })),
);

export function EditImageDialog(props: EditImageDialogProps) {
	return (
		<Dialog.Root disablePointerDismissal handle={props.handle}>
			<Dialog.Popup scroll="body">
				<Suspense
					fallback={
						<Dialog.Body>
							<div className={styles.loadingHeader} />
							<div className={styles.loadingBody}>
								<Spinner color="default" label={m['common.status.loading']()} />
							</div>
						</Dialog.Body>
					}
				>
					<EditImageDialogInner {...props} />
				</Suspense>
			</Dialog.Popup>
		</Dialog.Root>
	);
}