<svelte:options customElement={{ props: {} }} />

<script lang="ts">
  import NodeWrapper from '../core/NodeWrapper.svelte';
  import {type NodeProps, useNodesData, useStore, useSvelteFlow} from '@xyflow/svelte';
  import {Heading} from '../base';
  import ParamTokenEditor from '../core/ParamTokenEditor.svelte';
  import {getCurrentNodeId} from '#components/utils/NodeUtils';
  import {useAddParameter} from '../utils/useAddParameter.svelte';
  import OutputDefList from '../core/OutputDefList.svelte';
  import type {Parameter, TinyflowNodeData} from '#types';
  import {
    buildEnjoyEditorReferenceParameters,
    syncManagedParametersForFields,
  } from '../../utils/workflowNodeFields';

  const { data, ...rest }: {
        data: TinyflowNodeData,
        [key: string]: any
    } = $props();

    const currentNodeId = getCurrentNodeId();
    let currentNode = useNodesData(currentNodeId);
    const { addParameter } = useAddParameter();
    const { nodes, edges } = $derived(useStore());
    const { updateNodeData } = useSvelteFlow();
    const editorParameters = $derived.by(() => {
        return buildEnjoyEditorReferenceParameters(
            currentNodeId,
            nodes || [],
            edges || [],
            (((currentNode?.current?.data?.parameters as Array<Parameter>) || data.parameters || []) as Array<Parameter>)
        );
    });
    const syncTemplateValue = (nextValue: string) => {
        const currentData = ((currentNode?.current?.data as Record<string, any>) || data || {}) as Record<string, any>;
        updateNodeData(currentNodeId, {
            template: nextValue,
            parameters: syncManagedParametersForFields(
                (currentData.parameters as Array<Parameter>) || [],
                editorParameters,
                { template: nextValue },
                'enjoy'
            )
        });
    };

    $effect(() => {
        if (!data.outputDefs || data.outputDefs.length === 0) {
            addParameter(currentNodeId, 'outputDefs', {
                name: 'output',
                dataType: 'String',
                dataTypeDisabled: true,
                deleteDisabled: true
            });
        }
    });
</script>


<NodeWrapper {data} {...rest}>

    {#snippet icon()}
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path>
        </svg>
    {/snippet}

    <Heading level={3} mb="10px">模板内容</Heading>

    <div class="setting-item">
        <ParamTokenEditor
            mode="textarea"
            rows={10}
            tokenSyntax="enjoy"
            placeholder="请输入模板内容"
            style="width: 100%"
            parameters={editorParameters}
            value={String(data.template || '')}
            oninput={(e:any)=>{
                syncTemplateValue(e.target.value)
            }}
        />
    </div>


    <div class="heading">
        <Heading level={3} mt="10px">输出参数</Heading>
    </div>
    <OutputDefList />

</NodeWrapper>

<style>
    .heading {
        display: flex;
        margin-bottom: 10px;
    }

    .setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        gap: 10px;
    }

</style>
