<script lang="ts" setup>
	import { Field, useFieldArray } from "vee-validate";
	import { IBand } from "~/models/band";

	const { sb: selectedBands } = inject<any>("selectedBands");
	const allBands = inject<Ref<IBand[]>>("bandlist");
	const fname = inject<string>("curName");
	const opts = computed(() => {
		const uf: any[] = [];
		selectedBands.value.forEach((v: number) => {
			uf.push(allBands?.value.find((a) => a._id == v)?.characters);
		});
		return uf.flat(Infinity).map((a) => ({ value: a, label: a }));
	});
	const { fields, push, remove, replace, update } = useFieldArray<string[]>(
		fname + "relationships",
	);
	// replace([]);
</script>
<template>
	<a-form-item label="Pairings">
		<a-row
			:gutter="5"
			:wrap="true"
			v-for="(field, idx) in fields"
			:key="field.key"
		>
			<Field :name="fname + 'relationships' + `[${idx}]`">
				<a-select
					mode="multiple"
					:options="opts"
					v-model:value="field.value as string[]"
					@change="(val) => update(idx, val as string[])"
				>
					<template #removeIcon>
						<i class="far fa-circle-x" />
					</template>
				</a-select>
			</Field>
			<a-col :span="4">
				<a-button @click="(e) => remove(idx)"> - </a-button>
			</a-col>
		</a-row>
		<a-row justify="end">
			<a-col :span="2">
				<a-button @click="(e) => push([])"> + </a-button>
			</a-col>
		</a-row>
	</a-form-item>
</template>