import type { JSX } from 'react';
import type { Status } from '../shared/api/types/status';
import type { RouteParams } from '../shared/lib/route';
import { replaceParams } from '../shared/lib/router';
import { FixAllDialog } from '../features/fix/FixAllDialog';
import { FixPanel } from '../features/fix/FixPanel';
import { EditorPreviewDialog } from '../features/settings/EditorPreviewDialog';

type OverlaysProps = {
	params: RouteParams;
	status: Status;
};

function linkIdToFix( params: RouteParams ): number | null {
	const linkId = Number( params.fix );

	if ( Number.isInteger( linkId ) && linkId > 0 ) {
		return linkId;
	}

	return null;
}

export function Overlays( { params, status }: OverlaysProps ): JSX.Element {
	const linkId = linkIdToFix( params );
	const fixAllMode = params.fixall;

	if ( linkId !== null ) {
		return (
			<FixPanel
				linkId={ linkId }
				onClosed={ () => {
					replaceParams( { fix: undefined } );
				} }
			/>
		);
	}

	if ( fixAllMode === 'broken' || fixAllMode === 'moved' ) {
		return (
			<FixAllDialog
				mode={ fixAllMode }
				status={ status }
				onClosed={ () => {
					replaceParams( { fixall: undefined } );
				} }
			/>
		);
	}

	if ( params.preview === 'editor' ) {
		return (
			<EditorPreviewDialog
				onClosed={ () => {
					replaceParams( { preview: undefined } );
				} }
			/>
		);
	}

	return <></>;
}