<script lang="ts">
	import { createEventDispatcher, getContext } from 'svelte'
	import type { FlowEditorContext } from '../types'
	import { workerTags, workspaceStore } from '$lib/stores'
	import { WorkerService } from '$lib/gen'
	import WorkerTagSelect from '$lib/components/WorkerTagSelect.svelte'

	let {
		tag = $bindable(),
		nullTag,
		placeholder,
		noLabel,
		isPreprocessor
	}: {
		tag: string | undefined
		nullTag?: string | undefined
		placeholder?: string
		noLabel?: boolean
		isPreprocessor: boolean
	} = $props()

	const { flowStore, selectionManager } = getContext<FlowEditorContext>('FlowEditorContext')

	const dispatch = createEventDispatcher()
	loadWorkerGroups()

	async function loadWorkerGroups() {
		if (!$workerTags) {
			$workerTags = await WorkerService.getCustomTagsForWorkspace({ workspace: $workspaceStore! })
		}
	}
</script>

{#if $workerTags}
	{#if $workerTags?.length > 0}
		<div class="w-40">
			{#if flowStore.val.tag == undefined || isPreprocessor}
				<WorkerTagSelect
					{noLabel}
					{placeholder}
					{nullTag}
					bind:tag
					on:change={(e) => dispatch('change', e.detail)}
				/>
			{:else}
				<button
					title="Worker group is defined at the flow level"
					class="w-full text-left items-center font-normal p-1 py-2 border text-xs rounded"
					onclick={() => selectionManager.selectId('settings-worker-group')}
				>
					Flow's WG: {flowStore.val.tag}
				</button>
			{/if}
		</div>
	{/if}
{/if}
