<script setup lang="ts">
import type { DatasetItem, GpuInfo, ModelItem, TrainedModel } from '@/types'
import type { BasicMetricSetupDraft } from './BasicMetricSetupStep.vue'
import type { EvalRuleSetupDraft } from './EvalRuleSetupStep.vue'
import type { EvalTaskSetupDraft } from './EvalTaskSetupStep.vue'

const props = defineProps<{
  task: EvalTaskSetupDraft
  llmMetric: EvalRuleSetupDraft
  basicMetrics: BasicMetricSetupDraft
  trainedModels: TrainedModel[]
  evalDatasets: DatasetItem[]
  evalModels: ModelItem[]
  gpus: GpuInfo[]
}>()

function nameOf<T extends { id: string | number; name?: string }>(items: T[], id: string | number) {
  return items.find((item) => item.id === id)?.name || String(id || '-')
}
</script>

<template>
  <div class="start-eval-step">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="Task">{{ props.task.eval_task_name || '-' }}</el-descriptions-item>
      <el-descriptions-item label="Model">{{ nameOf(props.trainedModels, props.task.model_id) }}</el-descriptions-item>
      <el-descriptions-item label="GPU">GPU {{ props.task.gpu_id || 0 }}</el-descriptions-item>
      <el-descriptions-item label="Dataset">
        {{ props.task.data_source === 'dataset' ? nameOf(props.evalDatasets, props.task.dataset_id) : 'Inference results' }}
      </el-descriptions-item>
      <el-descriptions-item label="Eval model">{{ nameOf(props.evalModels, props.llmMetric.eval_model || '') }}</el-descriptions-item>
      <el-descriptions-item label="Eval method">{{ props.llmMetric.eval_method || '-' }}</el-descriptions-item>
      <el-descriptions-item label="Basic metrics" :span="2">
        <el-space wrap>
          <el-tag v-if="props.basicMetrics.bleu_enabled">BLEU-{{ props.basicMetrics.bleu_n }}</el-tag>
          <el-tag v-if="props.basicMetrics.rouge_enabled">{{ props.basicMetrics.rouge_methods.join(', ') }}</el-tag>
          <el-tag v-if="props.basicMetrics.cosine_enabled">Cosine</el-tag>
          <el-tag effect="plain">Precision {{ props.basicMetrics.output_precision }}</el-tag>
        </el-space>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>
.start-eval-step {
  max-width: 920px;
}
</style>
