<script setup>
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Field, FieldLabel } from "../../../../ui/field";
import { InputGroup, InputGroupInput } from "../../../../ui/input-group";
import { Locale as LocaleField } from "../../../../ui/locale";
import { Markdown } from "../../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../../form/schema";
import { schema } from "./schema";
defineOptions({ name: "ShwfedBlockMarkdownConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const blockSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(blockSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(blockSchema, f);
function setStyle(v) {
  value.value = { ...value.value, style: v.trim().length > 0 ? v : void 0 };
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('displayName')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('displayName')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("displayName") }}
      </FieldLabel>
      <InputGroup>
        <InputGroupInput
          :model-value="value.displayName ?? ''"
          placeholder="例：用户协议说明"
          @update:model-value="(v) => {
  const s = String(v ?? '');
  value = { ...value, displayName: s.length > 0 ? s : void 0 };
}"
        />
      </InputGroup>
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('style')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('style')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("style") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.style ?? ''"
        placeholder="返回 CSS 字符串或样式对象的表达式，如 'padding: 2rem'"
        multiline
        class="min-h-16"
        @update:model-value="(v) => setStyle(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
        :model-value="value.content"
        multiline
        markdown
        @update:model-value="(v) => value = { ...value, content: v }"
      />
    </Field>
  </div>
</template>
