<script setup>
import { Field, FieldLabel } from "../../../../ui/field";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Markdown } from "../../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
import TriggersField from "../../../components/triggers-field.vue";
import { schema } from "./schema";
defineOptions({ name: "ShwfedHttpRequestActionConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const actionSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(actionSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(actionSchema, f);
const RESULT_FIELDS = ["onSuccess", "onWarning", "onError", "onInfo"];
function updateMessageExpression(v) {
  const next = { ...value.value };
  if (v.length === 0) delete next.messageExpression;
  else next.messageExpression = v;
  value.value = next;
}
function updateResultExpression(v) {
  const next = { ...value.value };
  if (v.length === 0) delete next.resultExpression;
  else next.resultExpression = v;
  value.value = next;
}
function updateTriggers(key, next) {
  const draft = { ...value.value };
  if (next.length === 0) Reflect.deleteProperty(draft, key);
  else draft[key] = next;
  value.value = draft;
}
function updateBefore(next) {
  const draft = { ...value.value };
  if (next.length === 0) Reflect.deleteProperty(draft, "before");
  else draft.before = next;
  value.value = draft;
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('expression')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('expression')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("expression") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.expression"
        multiline
        placeholder="例：http.post('/api/foo').body({ id: row.id })"
        result-type="HttpRequest"
        class="min-h-16"
        @update:model-value="(v) => value = { ...value, expression: v }"
      />
    </Field>

    <!-- Pre-request triggers: run before the request fires. A halting op
         (e.g. the enclosing form's 校验) aborts the request. -->
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('before')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('before')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("before") }}
      </FieldLabel>
      <TriggersField
        :triggers="value.before ?? []"
        @update:triggers="(v) => updateBefore(v)"
      />
    </Field>

    <div class="flex items-start gap-2">
      <Field
        orientation="vertical"
        class="flex-1 basis-0 min-w-0"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('messageExpression')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('messageExpression')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("messageExpression") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.messageExpression ?? ''"
          placeholder="例：string(json.message)"
          result-type="string"
          :extra-vars="{ json: { type: 'dyn', label: 'HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09' } }"
          @update:model-value="updateMessageExpression"
        />
      </Field>

      <Field
        orientation="vertical"
        class="flex-1 basis-0 min-w-0"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('resultExpression')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('resultExpression')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("resultExpression") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.resultExpression ?? ''"
          placeholder="例：json.code == 0 ? 'success' : 'error'"
          result-type="string"
          :extra-vars="{ json: { type: 'dyn', label: 'HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09' } }"
          @update:model-value="updateResultExpression"
        />
      </Field>
    </div>

    <!-- One trigger list per 「执行结果」: the request completes, the result
         classifies the outcome, and the matching cell's operations run. -->
    <div class="grid grid-cols-2 gap-3">
      <Field
        v-for="key in RESULT_FIELDS"
        :key="key"
        orientation="vertical"
        class="min-w-0"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription(key)"
            #tooltip
          >
            <Markdown
              :source="fieldDescription(key)"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle(key) }}
        </FieldLabel>
        <TriggersField
          :triggers="value[key] ?? []"
          @update:triggers="(v) => updateTriggers(key, v)"
        />
      </Field>
    </div>
  </div>
</template>
