import { ARROW_ICON, ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import type { LinkBlock, LinkEntry } from "#types/block.types";
import { appendChildren, createElement } from "#core/factories/element.factory";
import { createLink } from "#presentation/components/link.component";

const renderNavigation = function renderNavigation(entry: LinkEntry, icon: string): Element {
    const body = createElement("div", { className: "block-nav-body" });
    body.append(createElement("h4", { className: "block-nav-title", text: entry.text }));
    if (entry.description !== undefined) {
        body.append(createElement("p", { className: "block-nav-description", text: entry.description }));
    }
    return createLink(entry.href, "block-nav", [
        createElement("i", { className: `${ICON_BASE_CLASS} ${icon} block-nav-icon` }),
        body,
        createElement("i", { className: `${ICON_BASE_CLASS} ${ARROW_ICON} block-nav-arrow` }),
    ]);
};

const renderLinkEntry = function renderLinkEntry(entry: LinkEntry, button: boolean): Element {
    if (entry.icon === undefined) {
        return createLink(entry.href, "block-link", [entry.text]);
    }
    if (button) {
        return createLink(entry.href, "block-button", [
            createElement("i", { className: `${ICON_BASE_CLASS} ${entry.icon}` }),
            createElement("span", { text: entry.text }),
        ]);
    }
    return renderNavigation(entry, entry.icon);
};

export const renderLinks = function renderLinks(block: LinkBlock): Element {
    const wrapper = createElement("div", { className: "block-links" });
    appendChildren(
        wrapper,
        block.links.map((entry) => renderLinkEntry(entry, block.button === true)),
    );
    return wrapper;
};