/* eslint-disable react/no-deprecated */
import { ReactElement } from 'react';
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';

interface RenderOptions {
    legacyRoot?: boolean;
}

interface RenderResult {
    rerender(element: ReactElement): void;
    unmount(): void;
}

export function render(
    element: ReactElement,
    container: Element | DocumentFragment,
    options?: RenderOptions
): RenderResult {
    if (typeof ReactDOMClient.createRoot !== 'function' || options?.legacyRoot) {
        return renderLegacyRoot(element, container);
    }

    const root = ReactDOMClient.createRoot(container);
    root.render(element);

    return {
        rerender(element: ReactElement) {
            root.render(element);
        },
        unmount() {
            root.unmount();
        },
    };
}

function renderLegacyRoot(
    element: ReactElement,
    container: Element | DocumentFragment
): RenderResult {
    ReactDOM.render(element, container);

    return {
        rerender(element: ReactElement) {
            ReactDOM.render(element, container);
        },
        unmount() {
            ReactDOM.unmountComponentAtNode(container);
        },
    };
}