import {
    CODE_LINE_ATTRIBUTE,
    CODE_LINE_CLASS,
    CODE_LINE_MARKED_CLASS,
} from "#configuration/constants/syntax.constants";
import { DEFINITION_CITED_LEAD, DEFINITION_MISSING, SOURCE_LOADING } from "#configuration/strings/walk.strings";
import { renderServedSource, renderSource } from "#presentation/renderers/source.renderer";
import type { DefinitionBlock } from "#types/block.types";
import { SOURCE_LOADED_EVENT } from "#configuration/constants/anatomy.constants";
import { TEXT_LANGUAGE } from "#configuration/constants/code.constants";
import { createElement } from "#core/factories/element.factory";
import { createPlainCodeBlock } from "#presentation/components/code.component";
import { definitionHref } from "#domain/converters/source.converter";
import { isStaticRender } from "#core/predicates/document.predicate";

const focusLine = function focusLine(holder: HTMLElement, line: number): void {
    const span = holder.querySelector<HTMLElement>(`.${CODE_LINE_CLASS}[${CODE_LINE_ATTRIBUTE}="${String(line)}"]`);
    if (span === null) {
        return;
    }
    span.classList.add(CODE_LINE_MARKED_CLASS);
    holder.scrollTop = span.offsetTop;
};

export const renderDefinition = function renderDefinition(block: DefinitionBlock): Element {
    if (isStaticRender()) {
        return renderServedSource(DEFINITION_CITED_LEAD, definitionHref(block.name, block.file), block.title);
    }
    const holder = createElement("div", {
        children: [createPlainCodeBlock(SOURCE_LOADING, block.title, TEXT_LANGUAGE)],
        className: "definition-holder",
    });
    void import("#domain/loaders/anatomy.loader").then((loader) => {
        const cited = loader.citedSource(block);
        if (cited === null) {
            holder.replaceChildren(createPlainCodeBlock(DEFINITION_MISSING, block.title, TEXT_LANGUAGE));
            return;
        }
        const source = renderSource(cited.block);
        source.addEventListener(
            SOURCE_LOADED_EVENT,
            () => {
                focusLine(holder, cited.location.line);
            },
            { once: true },
        );
        holder.replaceChildren(source);
    });
    return holder;
};