<script setup>
import { Field, FieldLabel } from "../../../../ui/field";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Locale as LocaleField } from "../../../../ui/locale";
import { Switch } from "../../../../ui/switch";
import { Markdown } from "../../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
import TriggersField from "../../../components/triggers-field.vue";
import { schema } from "./schema";
defineOptions({ name: "ShwfedHttpRequestBatchActionConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const actionSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(actionSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(actionSchema, f);
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 updateBefore(next) {
  const draft = { ...value.value };
  if (next.length === 0) Reflect.deleteProperty(draft, "before");
  else draft.before = next;
  value.value = draft;
}
function updateMarkdown(next) {
  const draft = { ...value.value };
  if (!next || next.length === 0) delete draft.markdown;
  else draft.markdown = next;
  value.value = draft;
}
function updateContinueOnError(v) {
  const next = { ...value.value };
  if (v) next.continueOnError = true;
  else delete next.continueOnError;
  value.value = next;
}
</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="例：range(1, 10).map(i, http.post('/api/foo').body({ id: i }))"
        result-type="list"
        class="min-h-16"
        @update:model-value="(v) => value = { ...value, expression: v }"
      />
    </Field>

    <div class="grid grid-cols-2 gap-3 items-start">
      <!-- Pre-request triggers: run before the batch fires. A halting op
           (e.g. the enclosing form's 校验) aborts the whole batch. -->
      <Field
        orientation="vertical"
        class="min-w-0"
      >
        <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>

      <!-- Progress-dialog body: localized markdown, interpolated with the live
           total / succeeded / failure counters as the batch runs. -->
      <Field
        orientation="vertical"
        class="min-w-0"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('markdown')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('markdown')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("markdown") }}
        </FieldLabel>
        <LocaleField
          markdown
          :model-value="value.markdown"
          @update:model-value="updateMarkdown"
        />
      </Field>
    </div>

    <Field orientation="horizontal">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('continueOnError')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('continueOnError')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("continueOnError") }}
      </FieldLabel>
      <Switch
        :model-value="value.continueOnError ?? false"
        @update:model-value="updateContinueOnError"
      />
    </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(jsons.size()) + ' 条已处理'"
          result-type="string"
          :extra-vars="{ jsons: { type: 'list', label: 'HTTP \u54CD\u5E94\u4F53\u5217\u8868\uFF08\u5DF2\u89E3\u6790 JSON\uFF0C\u4EC5\u6210\u529F\u9879\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"
          result-type="bool"
          :extra-vars="{ json: { type: 'dyn', label: 'HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09\uFF0C\u5F53\u524D\u8FD9\u4E00\u6761\u54CD\u5E94' } }"
          @update:model-value="updateResultExpression"
        />
      </Field>
    </div>
  </div>
</template>
