<script setup>
import { ColorPicker } from "../../../../ui/color-picker";
import { Field, FieldGroup, FieldLabel } from "../../../../ui/field";
import { IconPicker } from "../../../../ui/icon-picker";
import { Locale as LocaleField } from "../../../../ui/locale";
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: "ShwfedHttpRequestConfirmActionConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const actionSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(actionSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(actionSchema, f);
function patch(patchValue) {
  const next = { ...value.value, ...patchValue };
  for (const [k, v] of Object.entries(patchValue)) {
    if (v === void 0) Reflect.deleteProperty(next, k);
  }
  value.value = next;
}
const RESULT_FIELDS = ["onSuccess", "onWarning", "onError", "onInfo"];
function updateTriggers(key, next) {
  patch({ [key]: next.length === 0 ? void 0 : next });
}
function updateBefore(next) {
  patch({ before: next.length === 0 ? void 0 : next });
}
</script>

<template>
  <FieldGroup>
    <div class="grid grid-cols-2 gap-4">
      <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) => patch({ expression: v })"
        />
      </Field>

      <Field orientation="vertical">
        <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="(v) => patch({ markdown: v })"
        />
      </Field>
    </div>

    <!-- Pre-confirm triggers: run before the confirm dialog. A halting op
         (e.g. the enclosing form's 校验) skips both dialog and 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="grid grid-cols-2 gap-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('icon')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('icon')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("icon") }}
        </FieldLabel>
        <IconPicker
          :model-value="value.icon ?? ''"
          @update:model-value="(v) => patch(v.trim() === '' ? { icon: void 0 } : { icon: v })"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('color')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('color')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("color") }}
        </FieldLabel>
        <ColorPicker
          :model-value="value.color ?? ''"
          @update:model-value="(v) => patch(v.trim() === '' ? { color: void 0 } : { color: v })"
        />
      </Field>
    </div>

    <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="(v) => patch({ messageExpression: v === '' ? void 0 : v })"
        />
      </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="(v) => patch({ resultExpression: v === '' ? void 0 : v })"
        />
      </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>
  </FieldGroup>
</template>
