import { html } from "../html";
import { aboutString, router } from "../main";
import { OptionsSection } from "./OptionsSection";

type FooterColumn =
	| {
			type: "main";
			title: string;
			content?: string;
	  }
	| {
			type: "links";
			title: string;
			links: {
				text: string;
				link: string;
				hint?: string;
				internal?: boolean;
			}[];
	  };

function footerColumns(): FooterColumn[] {
	const links: { text: string; link: string; hint?: string }[] = [
		{ text: "git", link: "https://tangled.sh/@wlo.moe/www" },
		{ text: "bluesky", link: "https://bsky.app/profile/wlo.moe" },
		{ text: "email", link: "mailto:hai@wlo.moe", hint: "hai@wlo.moe" },
		{ text: "discuit", link: "https://discuit.org/@sillowww" },
		{
			text: "discord",
			link: "https://discord.com/users/1357056975812301013",
			hint: "you might only be able to use this link if you share a server with me, my username is @_sillowww",
		},
	];

	const footerColumns: FooterColumn[] = [
		{
			type: "main",
			title: "willow.",
			content: html`
        <p>${aboutString}</p>
        <p>
          this site is licensed under the gnu affero general public license
          version 3.
        </p>
        <p>
          source code is available on tangled.sh <a href="https://tangled.sh/@wlo.moe/www">here</a>.
        </p>
      `,
		},
		{
			type: "links",
			title: "links.",
			links,
		},
		{
			type: "links",
			title: "pages.",
			links: router.routes.map((route) => ({
				text: route.title || "unknown",
				link: route.path,
				internal: true,
			})),
		},
	];

	return footerColumns;
}

function FooterLink(props: {
	text: string;
	link: string;
	hint?: string;
	internal?: boolean;
}) {
	return html`<li>
    <a href="${props.link}" class="footer__link" data-link="${props.internal ? "true" : undefined}">
      ${props.text}
      ${props.hint ? html`<span class="hint">${props.hint}</span>` : ""}
    </a>
  </li>`;
}

function FooterColumn(props: FooterColumn) {
	if (props.type === "main") {
		return html`<div class="footer__column footer__column-main">
        <h2>${props.title}</h2>
        ${props.content || html`<p>no content provided.</p>`}
        ${OptionsSection()}
    </div>`;
	}

	return html`<div class="footer__column footer__column-links">
    <h3>${props.title}</h3>
    <ul>
      ${props.links.map((link) => FooterLink(link))}
    </ul>
  </div>`;
}

export function Footer() {
	const columns = footerColumns();

	return html`<footer className="footer">
    ${columns.map((column) => FooterColumn(column))}
  </footer>`;
}