import { AnyNode, Attrs, E, Elem } from "ren/node.ts";
import { classNames } from "ren/attrs.ts";
import { Context } from "../context.ts";

export function PageLayout(ctx: Context, children: AnyNode[]): Elem {
  return E("div", { id: "main" }, [
    Header(ctx),
    E("div", classNames("content"), children),
    Footer(),
  ]);
}

export function Header(ctx: Context): AnyNode {
  return E("header", classNames("header"), [
    E("div", classNames("content-width"), [HeaderNav(ctx)]),
  ]);
}

export function HeaderNav(ctx: Context): AnyNode {
  return E("nav", classNames("main-menu"), [
    Link("Главная", navLink("/", ctx)),
    Link("Рецепты", navLink("/recipes", ctx)),
    Link("Ингредиенты", navLink("/ingredients", ctx)),
  ]);
}

function navLink(href: string, ctx?: Context): Attrs {
  const attrs: Attrs = { href };
  if (ctx?.locPath === href) attrs["aria-current"] = "true";
  return attrs;
}

export function Footer(): AnyNode {
  return E("footer", classNames("footer"), [
    E("div", classNames("content-width"), [
      Link("Исходный код", {
        href: "https://notabug.org/pleshevskiy/recipes",
        rel: "external nofollow noopener noreferrer",
      }),
    ]),
  ]);
}

export function Link(text: string, attrs: Attrs | Attrs[]): AnyNode {
  return E("a", attrs, text);
}