<template>
	<Dialog
		:model-value="modelValue"
		@update:model-value="(value: boolean) => emit('update:modelValue', value)"
		:options="{
			title: 'Create',
			message: 'Create a new role.',
			size: '2xl',
			actions: [
				{
					label: 'Submit',
					variant: 'solid',
					onClick: () => emit('create', title, users, resources),
				},
			],
		}"
	>
		<template #body-content>
			<div class="space-y-4">
				<div class="space-y-2 leading-relaxed">
					<div class="font-medium text-lg">Title</div>
					<FormControl
						v-model="title"
						type="text"
						size="sm"
						variant="subtle"
						placeholder="Website Manager"
					/>
				</div>
				<div class="space-y-2 leading-relaxed">
					<div class="font-medium text-lg">Users</div>
					<FormControl
						type="select"
						size="sm"
						variant="subtle"
						placeholder="hello@example.com"
						model-value=""
						:options="teamMembers(users)"
						@update:model-value="
							(u: string) => {
								users.push(u);
							}
						"
					/>
					<div class="flex gap-2 flex-wrap">
						<div
							v-for="user in users"
							class="text-base border rounded-xl px-2 py-2"
						>
							{{ user }}
						</div>
					</div>
				</div>
				<div class="space-y-2 leading-relaxed">
					<div class="font-medium text-lg">Resources</div>
					<FormControl
						type="select"
						size="sm"
						variant="subtle"
						placeholder="jerp.jingrow.cloud"
						model-value=""
						:options="resourceOptions"
						@update:model-value="
							(r: string) => {
								resources.push(
									resourceOptions.find((resource) => resource.value === r),
								);
							}
						"
					/>
					<div class="flex gap-2 flex-wrap">
						<div
							v-for="resource in resources"
							class="text-base border rounded-xl px-2 py-2"
						>
							{{ resource.document_name }}
						</div>
					</div>
				</div>
			</div>
		</template>
	</Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Dialog, FormControl } from 'jingrow-ui';
import { teamMembers, teamResources } from './data';

defineProps<{
	modelValue: boolean;
}>();

const emit = defineEmits<{
	create: [title: string, users: string[], resources: string[]];
	'update:modelValue': [value: boolean];
}>();

const title = ref('');
const users = ref<string[]>([]);
const resources = ref<any[]>([]);

const resourceOptions = computed(() => {
	return teamResources.value.filter(
		(resource) =>
			!resources.value.some(
				(r) =>
					r.document_type === resource.document_type &&
					r.document_name === resource.document_name,
			),
	);
});
</script>
