import { ANATOMY_ATTRIBUTION, ANATOMY_META } from "#configuration/strings/anatomy.strings";
import { ANATOMY_DESCRIPTION, ANATOMY_TITLE } from "#configuration/strings/page.strings";
import { CREATIVE_COMMONS, SITE_URL, pagePath } from "#assets/link.assets";
import { mountTabSwitching, renderTabbedPage } from "#presentation/widgets/tab.widget";
import { ANATOMY_PAGE } from "#core/ids/page.ids";
import { ANATOMY_TABS } from "#configuration/strings/anatomy.fragment.strings";
import { ANATOMY_TONE } from "#configuration/constants/tab.constants";
import { METHODOLOGY_AUTHOR } from "#configuration/strings/methodology.strings";
import type { PageDefinition } from "#types/page.types";
import type { SchemaEntity } from "#types/schema.types";
import type { TabbedPage } from "#types/tab.types";
import { renderLicensedFooter } from "#presentation/renderers/methodology.renderer";

const ANATOMY_ENTITY: SchemaEntity = {
    "@type": "Dataset",
    author: { "@type": "Person", name: METHODOLOGY_AUTHOR },
    description: ANATOMY_DESCRIPTION,
    license: CREATIVE_COMMONS,
    name: ANATOMY_META.title,
    url: SITE_URL + pagePath(ANATOMY_PAGE),
    version: ANATOMY_META.version,
};

const renderAnatomyFooter = function renderAnatomyFooter(): Element {
    return renderLicensedFooter(ANATOMY_ATTRIBUTION);
};

const DEFINITION: TabbedPage = {
    footer: renderAnatomyFooter,
    layout: "chapter",
    meta: ANATOMY_META,
    page: ANATOMY_PAGE,
    tabs: ANATOMY_TABS,
    tone: ANATOMY_TONE,
};

const renderAnatomy = function renderAnatomy(): Element {
    return renderTabbedPage(DEFINITION);
};

void mountTabSwitching(DEFINITION);

export const PAGE: PageDefinition = {
    content: { kind: "tabbed", layout: DEFINITION.layout, meta: ANATOMY_META, tabs: ANATOMY_TABS },
    description: ANATOMY_DESCRIPTION,
    entities: [ANATOMY_ENTITY],
    id: ANATOMY_PAGE,
    render: renderAnatomy,
    title: ANATOMY_TITLE,
};