import {
	Controller,
	Param,
	RenderAhead,
	Route,
	View,
	ViewRoot,
} from "@muddle/decorators";
import { FEATURES, INTRO, navFor } from "./registry.ts";
import { albumRibbonCss } from "./albumStyle.ts";
import { discography } from "./musicbrainz.ts";

import type { ViewPropsOf } from "../../_muddle/contracts/views.ts";

const EMPTY = {
	title: "Not found",
	nav: navFor(),
	albums: [],
	ribbonStyle: "",
	label: "Not found",
	prose: null,
	features: [],
	current: undefined,
};

@Controller("/")
@ViewRoot("./views")
export class AppController {
	@View("index.spug")
	async index(): Promise<ViewPropsOf<"modules/app/views/index">> {
		const albums = await discography();
		return {
			title: "muddle",
			nav: navFor(),
			albums,
			ribbonStyle: albumRibbonCss(albums),
			intro: INTRO,
			features: [],
		};
	}

	@Route("/features/:slug")
	@RenderAhead(FEATURES.map((feature) => feature.href))
	@View("feature.spug")
	async show(
		@Param("slug") slug: string,
	): Promise<ViewPropsOf<"modules/app/views/feature">> {
		const feature = FEATURES.find((entry) => entry.slug === slug);
		const albums = await discography();
		if (!feature) {
			return { ...EMPTY, nav: navFor() };
		}
		return {
			title: feature.label,
			nav: navFor(feature.slug),
			albums,
			ribbonStyle: albumRibbonCss(albums),
			label: feature.label,
			prose: await feature.prose(),
			features: [],
			current: feature.href,
		};
	}
}