import { CollectionItem } from "sealious";
import { FilePointer, PathFilePointer } from "@sealcode/file-manager";
import { FlatTemplatable, tempstream } from "tempstream";
import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
import { KoaResponsiveImageRouter } from "koa-responsive-image-router";

export class MultipleImages extends MultipleFiles {
	constructor(
		public field: MultipleFilesField,
		public imageRouter: KoaResponsiveImageRouter,
		options?: Partial<MultipleFilesOptions>
	) {
		super(field, options);
	}

	getClassModifiers() {
		return ["multiple-files--photos"];
	}

	getInputAttributes() {
		return { ...super.getInputAttributes(), accept: "image/*" };
	}

	async renderFileItem(
		fileItem: CollectionItem,
		file: FilePointer
	): Promise<FlatTemplatable> {
		if (!(file instanceof PathFilePointer)) {
			return "";
		}
		const path = await file.getPath();
		if (!path) {
			return "missing file";
		}
		return tempstream /* HTML */ `<li>
			<a href="${file.getURL()}" data-turbo="false">
				${this.imageRouter.image(path, {
					resolutions: [150, 300],
					sizesAttr: "150px",
					alt: "",
				})}
			</a>
			<span class="filename">
				${(await file.getOriginalFilename()) || "no filename"}</span
			>
			${this.renderFileRemoveButton(fileItem)}
		</li>`;
	}
}