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

<script lang="ts">
  import NodeWrapper from '../core/NodeWrapper.svelte';
  import {Heading, Input, Textarea} from '../base';
  import {Button} from '../base/index.js';
  import {type NodeProps} from '@xyflow/svelte';
  import DefinedParameterList from '../core/DefinedParameterList.svelte';
  import {getCurrentNodeId} from '#components/utils/NodeUtils';
  import {useSvelteFlow} from '@xyflow/svelte';
  import {
    appendStartFormField,
    isSystemStartParameter,
    normalizeStartNodeData,
    normalizeStartFormMeta,
  } from '../../utils/workflowNodeFields';
  import type {TinyflowNodeData} from '#types';

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

    const currentNodeId = getCurrentNodeId();
    const { updateNodeData } = useSvelteFlow();

    $effect(() => {
        const normalizedData = normalizeStartNodeData((data || {}) as Record<string, any>, {
            allowLegacyParametersOnly: true
        });
        const nextData = {
            ...(data || {}),
            ...normalizedData,
        };
        if (JSON.stringify(data || {}) !== JSON.stringify(nextData)) {
            updateNodeData(currentNodeId, nextData);
        }
    });

    const updateStartFormMeta = (key: 'title' | 'description' | 'submitText', value: string) => {
        updateNodeData(currentNodeId, (node) => {
            const normalizedMeta = normalizeStartFormMeta(node.data?.startFormMeta as Record<string, any>);
            return {
                startFormMeta: {
                    ...normalizedMeta,
                    [key]: value,
                },
            };
        });
    };

    let currentParameters = $derived.by(() => {
        return ((data.parameters as Array<any>) || []);
    });
    let startFormMeta = $derived.by(() => {
        return normalizeStartFormMeta((data.startFormMeta as Record<string, any>) || {});
    });
    let systemParameters = $derived.by(() => {
        return currentParameters.filter((parameter) => isSystemStartParameter(parameter));
    });
    let customParameters = $derived.by(() => {
        return currentParameters.filter((parameter) => !isSystemStartParameter(parameter));
    });

</script>


<NodeWrapper {...rest} {data} allowExecute={false} showTargetHandle={false} allowSettingOfCondition={false}>
    {#snippet icon()}
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path
                d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path>
        </svg>
    {/snippet}
    <div class="param-section">
        <div class="heading">
            <Heading level={3}>开场表单</Heading>
        </div>
        <div class="section-description">配置开始问答的标题、说明和提交按钮文案。</div>
        <div class="meta-form">
            <div class="meta-form-item">
                <div class="meta-label">标题</div>
                <Input
                    style="width: 100%;"
                    value={startFormMeta.title}
                    placeholder="请输入表单标题"
                    oninput={(event) => updateStartFormMeta('title', (event.target as HTMLInputElement)?.value || '')}
                />
            </div>
            <div class="meta-form-item">
                <div class="meta-label">说明</div>
                <Textarea
                    rows={2}
                    style="width: 100%;"
                    value={startFormMeta.description}
                    placeholder="请输入表单说明"
                    oninput={(event) => updateStartFormMeta('description', (event.target as HTMLTextAreaElement)?.value || '')}
                />
            </div>
            <div class="meta-form-item">
                <div class="meta-label">提交按钮</div>
                <Input
                    style="width: 100%;"
                    value={startFormMeta.submitText}
                    placeholder="请输入按钮文案"
                    oninput={(event) => updateStartFormMeta('submitText', (event.target as HTMLInputElement)?.value || '')}
                />
            </div>
        </div>
    </div>

    <div class="param-section">
        <div class="heading">
            <Heading level={3}>系统入口</Heading>
        </div>
        <div class="section-description">固定主问题字段，名称与必填规则固定，可调整展示方式与提示文案。</div>
        <DefinedParameterList parameters={systemParameters} emptyText="暂无系统入口参数" />
    </div>

    <div class="param-section">
        <div class="heading">
            <Heading level={3}>自定义参数</Heading>
            <Button class="input-btn-more" style="margin-left: auto" onclick={()=>{
                updateNodeData(currentNodeId, (node) => {
                    return appendStartFormField(node.data as Record<string, any>, {
                        label: '新字段',
                        type: 'text',
                        placeholder: '请输入内容',
                    });
                });
            }}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
                </svg>
            </Button>
        </div>
        <div class="section-description">这里添加额外收集字段，字段顺序按列表顺序保存，首版不提供拖拽排序。</div>
        <DefinedParameterList parameters={customParameters} emptyText="暂无自定义参数" />
    </div>
</NodeWrapper>

<style lang="less">

  .heading {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .param-section + .param-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tf-border-color);
  }

  .meta-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .meta-form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .meta-label {
    font-size: 12px;
    color: var(--tf-text-secondary);
  }

  .section-description {
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--tf-text-muted);
    line-height: 1.5;
  }

  :global(.input-btn-more) {
    border: 1px solid transparent;
    padding: 3px;

    &:hover {
      background: var(--tf-bg-hover);
      border: 1px solid transparent;
    }
  }
</style>
