<script lang="ts">
	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
	import Toggle from '$lib/components/Toggle.svelte'
	import PropPickerWrapper from '$lib/components/flows/propPicker/PropPickerWrapper.svelte'
	import type { FlowModule } from '$lib/gen'
	import type { FlowEditorContext } from '../types'
	import { getContext } from 'svelte'
	import { getStepPropPicker } from '../previousResults'
	import { flowStateStore } from '../flowState'
	import { flowStore } from '../flowStore'
	import Tooltip from '$lib/components/Tooltip.svelte'

	const { previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')

	export let flowModule: FlowModule
	export let parentModule: FlowModule | undefined
	export let previousModuleId: string | undefined

	let editor: SimpleEditor | undefined = undefined

	$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if)

	let pickableProperties: Record<string, any> = {}

	$: {
		const propPicker = getStepPropPicker(
			$flowStateStore,
			parentModule,
			flowModule,
			$flowStore,
			previewArgs
		).pickableProperties
		propPicker['result'] = propPicker['previous_result']
		delete propPicker['previous_result']
		pickableProperties = propPicker
	}
</script>

<div class="flex flex-col items-start space-y-2 {$$props.class}">
	<h2 class="mt-2"
		>Early stop <Tooltip>
			If defined, at the end of the step, the predicate expression will be evaluated to decide if
			the flow should stop early. Skipped flows are just a label useful to not see them in the runs
			page.</Tooltip
		></h2
	>
	<Toggle
		checked={isStopAfterIfEnabled}
		on:change={() => {
			if (isStopAfterIfEnabled && flowModule.stop_after_if) {
				flowModule.stop_after_if = undefined
			} else {
				flowModule.stop_after_if = {
					expr: 'result == undefined',
					skip_if_stopped: false
				}
			}
		}}
		options={{
			right: 'Early stop if condition met'
		}}
	/>

	<div class="border p-2  flex flex-col {flowModule.stop_after_if ? '' : 'bg-gray-50'}">
		{#if flowModule.stop_after_if}
			<Toggle
				bind:checked={flowModule.stop_after_if.skip_if_stopped}
				options={{
					right: 'Skip if stopped'
				}}
			/>
			<span class="text-xs font-bold">Stop condition expression</span>
			<div class="border w-full">
				<PropPickerWrapper
					priorId={previousModuleId}
					{pickableProperties}
					on:select={({ detail }) => {
						editor?.insertAtCursor(detail)
					}}
				>
					<SimpleEditor
						bind:this={editor}
						lang="javascript"
						bind:code={flowModule.stop_after_if.expr}
						class="small-editor"
					/>
				</PropPickerWrapper>
			</div>
		{:else}
			<Toggle
				disabled
				options={{
					right: 'Skip if stopped'
				}}
			/> <span class="text-xs font-bold">Stop condition expression</span>
			<textarea disabled rows="3" class="min-h-[80px]" />
		{/if}
	</div>
</div>
