<script setup>
import { Field, FieldLabel } from "../../../../ui/field";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "../../../../ui/select";
import { Markdown } from "../../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
import { schema } from "./schema";
defineOptions({ name: "ShwfedNavigationActionConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const actionSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(actionSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(actionSchema, f);
const MODE_OPTIONS = [
  { value: "_self", label: "\u5F53\u524D\u9875\u9762\u6253\u5F00" },
  { value: "_blank", label: "\u65B0\u9875\u9762\u6253\u5F00" }
];
</script>

<template>
  <div class="flex flex-col gap-3">
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('url')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('url')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("url") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.url ?? ''"
        placeholder="例：'/detail/' + string(row.id)"
        result-type="string"
        multiline
        class="min-h-10"
        @update:model-value="(v) => value = { ...value, url: v }"
      />
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('mode')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('mode')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("mode") }}
      </FieldLabel>
      <Select
        :model-value="value.mode ?? '_self'"
        @update:model-value="(v) => value = { ...value, mode: v }"
      >
        <SelectTrigger class="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
            v-for="opt in MODE_OPTIONS"
            :key="opt.value"
            :value="opt.value"
          >
            {{ opt.label }}
          </SelectItem>
        </SelectContent>
      </Select>
    </Field>
  </div>
</template>
