import { AUTHOR_PROFILE, CREATIVE_COMMONS } from "#assets/link.assets";
import {
    DOCUMENTATION_COVERED_BY,
    LICENSE_NAME,
    METHODOLOGY_ATTRIBUTION,
    METHODOLOGY_AUTHOR,
    METHODOLOGY_COPYRIGHT,
} from "#configuration/strings/methodology.strings";
import { LICENSE_BY, LICENSE_CC, LICENSE_SA } from "#assets/image.assets";
import { FADE_IN_UP } from "#configuration/constants/element.constants";
import { SPACE } from "#configuration/constants/document.constants";
import { animated } from "#presentation/renderers/element.renderer";
import { createElement } from "#core/factories/element.factory";
import { createExternalLink } from "#presentation/components/link.component";

const BADGES: readonly (readonly [string, string])[] = [
    [LICENSE_CC, "CC"],
    [LICENSE_BY, "BY"],
    [LICENSE_SA, "SA"],
];

const renderBadges = function renderBadges(): Element {
    return createExternalLink(
        CREATIVE_COMMONS,
        "license-badges",
        BADGES.map(([src, alt]) => createElement("img", { attributes: { alt, src }, className: "license-badge" })),
    );
};

export const renderLicensedFooter = function renderLicensedFooter(attribution: string): Element {
    const license = createElement("p", { className: "tab-footer-text" });
    license.append(
        DOCUMENTATION_COVERED_BY,
        createExternalLink(CREATIVE_COMMONS, "footer-link", [LICENSE_NAME]),
        SPACE,
        renderBadges(),
    );
    const credit = createElement("p", { className: "tab-footer-license" });
    credit.append(
        METHODOLOGY_COPYRIGHT,
        createExternalLink(AUTHOR_PROFILE, "footer-link", [METHODOLOGY_AUTHOR]),
        attribution,
    );
    return animated("footer", { children: [license, credit], className: "tab-page-footer" }, FADE_IN_UP);
};

export const renderMethodologyFooter = function renderMethodologyFooter(): Element {
    return renderLicensedFooter(METHODOLOGY_ATTRIBUTION);
};