<script lang="ts">
	import { getContext, createEventDispatcher } from 'svelte'
	import type { AppInput, InputConnection } from '../../inputType'
	import type { AppViewerContext } from '../../types'
	import { Code, CurlyBraces, FunctionSquare, Pen, Plug2 } from 'lucide-svelte'

	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
	import ConnectionButton from '$lib/components/common/button/ConnectionButton.svelte'
	import type EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte'

	export let componentInput: AppInput
	export let disableStatic: boolean = false
	export let evalV2editor: EvalV2InputEditor | undefined

	const { onchange, connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')

	const dispatch = createEventDispatcher()

	$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
		//@ts-ignore
		componentInput.type = 'templatev2'
		componentInput['eval'] = componentInput.value
		componentInput['connections'] = [{ componentId: 'ctx', id: 'email' }]
	}

	function applyConnection(connection: InputConnection) {
		console.log(connection)
		const expr = `${connection.componentId}.${connection.path}`
		//@ts-ignore
		componentInput = {
			...componentInput,
			type: 'evalv2',
			expr: expr,
			connections: [
				{
					componentId: connection.componentId,
					id: connection?.path?.split('.')?.[0]?.split('[')?.[0]
				}
			]
		}
		evalV2editor?.setCode(expr)
		$app = $app
	}

	let clientWidth: number
	const iconOnlyThreshold = 300
</script>

{#if componentInput.fieldType !== 'any'}
	<div class="w-full">
		<div class="flex gap-2 justify-end" bind:clientWidth>
			<ToggleButtonGroup
				on:selected={() => {
					onchange?.()
				}}
				noWFull
				bind:selected={componentInput.type}
			>
				{#if componentInput.fieldType === 'template'}
					{#if componentInput.type == 'template'}
						<ToggleButton
							tooltip={`Templated string (use \$\{<output>.x\} )`}
							value="template"
							disabled={disableStatic}
							icon={CurlyBraces}
							label="Template"
						/>
					{:else}
						<ToggleButton
							tooltip={`Templated string (use \$\{<output>.x\} )`}
							value="templatev2"
							disabled={disableStatic}
							icon={CurlyBraces}
							label="Template"
						/>
					{/if}
				{:else if componentInput.noStatic !== true}
					<ToggleButton
						label="Static"
						value="static"
						disabled={disableStatic}
						iconOnly={clientWidth < iconOnlyThreshold}
						icon={Pen}
					/>
				{/if}
				{#if componentInput.type == 'connected'}
					<ToggleButton
						value="connected"
						icon={Plug2}
						iconOnly={clientWidth < iconOnlyThreshold}
						label="Connect"
					/>
				{/if}
				<ToggleButton
					value="evalv2"
					icon={FunctionSquare}
					iconOnly={clientWidth < iconOnlyThreshold}
					label="Eval"
				/>

				<ToggleButton
					value="runnable"
					icon={Code}
					iconOnly={clientWidth < iconOnlyThreshold}
					label="Compute"
					id="data-source-compute"
				/>
			</ToggleButtonGroup>

			<div class="flex">
				<ConnectionButton
					closeConnection={() => {
						$connectingInput = {
							opened: false,
							hoveredComponent: undefined,
							input: undefined,
							onConnect: () => {}
						}
						dispatch('select', true)
					}}
					openConnection={() => {
						$connectingInput = {
							opened: true,
							input: undefined,
							hoveredComponent: undefined,
							onConnect: applyConnection
						}
					}}
					isOpen={!!$connectingInput.opened}
				/>
			</div>
		</div>
	</div>
{/if}
