<script setup>
import { Field, FieldLabel } from "../../../../ui/field";
import { Input } from "../../../../ui/input";
import { Locale as LocaleField } from "../../../../ui/locale";
import { Markdown } from "../../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
import { schema } from "./schema";
defineOptions({ name: "ShwfedMarkdownItemConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const itemSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(itemSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(itemSchema, f);
</script>

<template>
  <div class="flex flex-col gap-4">
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('name')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('name')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("name") }}
      </FieldLabel>
      <Input
        :model-value="value.name"
        placeholder="仅用于编辑器内识别"
        @update:model-value="(v) => value = { ...value, name: String(v) }"
      />
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('content')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('content')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("content") }}
      </FieldLabel>
      <LocaleField
        markdown
        multiline
        :model-value="value.content"
        @update:model-value="(v) => value = { ...value, content: v }"
      />
    </Field>
  </div>
</template>
