<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 "../../../schema";
import { schema } from "./schema";
defineOptions({ name: "ShwfedMarkdownFieldConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
</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('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>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template #tooltip>
          <Markdown
            :source="fieldDescription('hidden') ?? '\u8FD4\u56DE `true` \u65F6\u5B57\u6BB5\u5728\u6240\u6709\u5E03\u5C40\u4E2D\u90FD\u4E0D\u6E32\u67D3'"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("hidden") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.hidden ?? ''"
        placeholder="例：form.role == 'guest'"
        result-type="bool"
        class="min-h-10"
        @update:model-value="(v) => value = { ...value, hidden: v.length > 0 ? v : void 0 }"
      />
    </Field>
  </div>
</template>
