<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

export interface BasicMetricSetupDraft {
  bleu_enabled: boolean
  bleu_n: number
  rouge_enabled: boolean
  rouge_methods: string[]
  cosine_enabled: boolean
  output_precision: number
}

defineProps<{
  disabled?: boolean
}>()

const form = defineModel<BasicMetricSetupDraft>({ required: true })
const formRef = ref<FormInstance>()

const rules: FormRules<BasicMetricSetupDraft> = {
  bleu_n: [{ required: true, type: 'number', min: 1, max: 8, message: 'BLEU ngram must be between 1 and 8', trigger: 'change' }],
  output_precision: [{ required: true, type: 'number', min: 0, max: 8, message: 'Precision must be between 0 and 8', trigger: 'change' }],
}

async function validate() {
  if (!formRef.value) return false
  try {
    return !!(await formRef.value.validate())
  } catch {
    return false
  }
}

defineExpose({ validate })
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="140px"
    class="basic-metric-form"
    :disabled="disabled"
  >
    <el-form-item label="BLEU">
      <el-switch v-model="form.bleu_enabled" />
    </el-form-item>
    <el-form-item v-if="form.bleu_enabled" label="BLEU ngram" prop="bleu_n">
      <el-input-number v-model="form.bleu_n" :min="1" :max="8" />
    </el-form-item>

    <el-form-item label="ROUGE">
      <el-switch v-model="form.rouge_enabled" />
    </el-form-item>
    <el-form-item v-if="form.rouge_enabled" label="ROUGE methods">
      <el-checkbox-group v-model="form.rouge_methods">
        <el-checkbox value="rouge_1">ROUGE-1</el-checkbox>
        <el-checkbox value="rouge_2">ROUGE-2</el-checkbox>
        <el-checkbox value="rouge_l">ROUGE-L</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="Cosine">
      <el-switch v-model="form.cosine_enabled" />
    </el-form-item>
    <el-form-item label="Output precision" prop="output_precision">
      <el-input-number v-model="form.output_precision" :min="0" :max="8" />
    </el-form-item>
  </el-form>
</template>

<style scoped>
.basic-metric-form {
  max-width: 760px;
}
</style>
