import { FieldTypes as SealiousFieldTypes } from "sealious";
import { CollectionField } from "../fields/collection-field.js";
import { DropdownOptions, FreeformDropdown } from "./dropdown.js";
import { Collection, CollectionItem } from "sealious";

export class SingleReferenceDropdown<
	TargetCollection extends Collection,
	F extends SealiousFieldTypes.SingleReference,
	Required extends boolean,
> extends FreeformDropdown {
	constructor(
		public field: CollectionField<F, Required>,
		public options: DropdownOptions & {
			getLabel?: (item: CollectionItem<Collection>) => string;
		} = {
			label: field.label || field.name,
			autosubmit: false,
			autocomplete: true,
		}
	) {
		super(
			field,
			async (ctx) => {
				const { items } = await ctx.$app.collections[
					field.sealiousField.target_collection
				]
					.list(ctx.$context)
					.fetch();
				return [
					{ value: "", label: "--" },
					...items.map((item) => ({
						value: item.id,
						label: options.getLabel
							? options.getLabel(item)
							: item.id,
					})),
				];
			},
			options
		);
	}

	setOptionLabelGetter(
		getter: (item: CollectionItem<TargetCollection>) => string
	): this {
		this.options.getLabel = getter;
		return this;
	}
}