<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { $t } from '@vben/locales';

import { ElInput, ElOption, ElSelect } from 'element-plus';

const props = defineProps<{ data: any; nodeId: string }>();
const emit = defineEmits(['update']);

const label = ref(
  props.data.label || $t('ai-platform.workflow.panels.merge.label'),
);
const mergeMode = ref(props.data.merge_mode || 'object');
const separator = ref(props.data.separator || '\n');
const outputVariable = ref(props.data.output_variable || 'merged_result');

const outputTemplate = computed(() => `{{${outputVariable.value}}}`);

const mergeModes = [
  {
    label: $t('ai-platform.workflow.panels.merge.objectMode'),
    value: 'object',
  },
  { label: $t('ai-platform.workflow.panels.merge.arrayMode'), value: 'array' },
  { label: $t('ai-platform.workflow.panels.merge.firstMode'), value: 'first' },
  {
    label: $t('ai-platform.workflow.panels.merge.concatMode'),
    value: 'concat',
  },
];

watch(
  [label, mergeMode, separator, outputVariable],
  ([labelVal, modeVal, sepVal, outVal]) => {
    emit('update', {
      ...props.data,
      label: labelVal,
      merge_mode: modeVal,
      separator: sepVal,
      output_variable: outVal,
    });
  },
);
</script>

<template>
  <div class="space-y-4">
    <div>
      <label class="text-foreground mb-1 block text-sm font-medium">{{
        $t('ai-platform.workflow.panels.common.nodeName')
      }}</label>
      <ElInput
        v-model="label"
        :placeholder="$t('ai-platform.workflow.panels.merge.placeholder')"
      />
    </div>

    <div>
      <label class="text-foreground mb-1 block text-sm font-medium">{{
        $t('ai-platform.workflow.panels.merge.mergeMode')
      }}</label>
      <ElSelect v-model="mergeMode" class="w-full">
        <ElOption
          v-for="mode in mergeModes"
          :key="mode.value"
          :label="mode.label"
          :value="mode.value"
        />
      </ElSelect>
      <div class="text-muted-foreground mt-1 text-xs">
        <template v-if="mergeMode === 'object'">
          {{ $t('ai-platform.workflow.panels.merge.objectDesc') }}
        </template>
        <template v-else-if="mergeMode === 'array'">
          {{ $t('ai-platform.workflow.panels.merge.arrayDesc') }}
        </template>
        <template v-else-if="mergeMode === 'first'">
          {{ $t('ai-platform.workflow.panels.merge.firstDesc') }}
        </template>
        <template v-else-if="mergeMode === 'concat'">
          {{ $t('ai-platform.workflow.panels.merge.concatDesc') }}
        </template>
      </div>
    </div>

    <div v-if="mergeMode === 'concat'">
      <label class="text-foreground mb-1 block text-sm font-medium">{{
        $t('ai-platform.workflow.panels.merge.separator')
      }}</label>
      <ElInput v-model="separator" placeholder="\n" />
    </div>

    <div>
      <label class="text-foreground mb-1 block text-sm font-medium">{{
        $t('ai-platform.workflow.panels.common.outputVarName')
      }}</label>
      <ElInput v-model="outputVariable" placeholder="merged_result" />
    </div>

    <div class="border-border bg-muted rounded border p-3">
      <div class="text-muted-foreground text-xs font-medium">
        {{ $t('ai-platform.workflow.panels.common.usage') }}
      </div>
      <ul class="text-muted-foreground mt-1 list-inside list-disc text-xs">
        <li>{{ $t('ai-platform.workflow.panels.merge.usageTip1') }}</li>
        <li>{{ $t('ai-platform.workflow.panels.merge.usageTip2') }}</li>
        <li>
          {{
            $t('ai-platform.workflow.panels.merge.usageTip3', {
              template: outputTemplate,
            })
          }}
        </li>
      </ul>
    </div>
  </div>
</template>
