import type { Metadata, ResolvingMetadata } from 'next';
import Image from 'next/image';

import Content from './content';
import {
	root,
	center,
	title_group,
	title_text_group,
	supertitle,
	title,
	download_button,
	download_button_image,
	download_text_section,
	download_text,
} from './page.css';
import download_image from './download.png';

type SearchParams = { [key: string]: string | string[] | undefined };

type Props = {
	params: { file: string },
	searchParams: SearchParams,
};

function get_root(search_params: SearchParams) {
	console.log("HEEEERORORORRO", search_params)
	return search_params['root'] ?? 'raw.monodon.me';
}

export async function generateMetadata(
	{ params, searchParams }: Props,
	parent: ResolvingMetadata,
): Promise<Metadata> {
	return {
		title: `${params.file} | ${get_root(searchParams)}`,
	};
}

export default async function Page({
	params, searchParams
}: Props) {
	const root_url = `https://${get_root(searchParams)}/`;

	return (
		<div className={root}>
			<div className={center}>
				<div className={title_group}>
					<div className={title_text_group}>
		 				<p className={supertitle}>{root_url}</p>
						<p className={title}>{params.file}</p>
					</div>
					<button className={download_button}>
						<Image
							className={download_button_image}
							src={download_image}
							alt="Download Button"
						/>
					</button>
				</div>
				<Content src={`${root_url}${params.file}`} />
			</div>
		</div>
	);
}