<script setup>
import { computed, inject, onBeforeUnmount, onMounted } from "vue";
import ActionsConfigEditor from "../../../../actions/config.vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Field, FieldLabel } from "../../../../ui/field";
import { InputGroup, InputGroupInput } from "../../../../ui/input-group";
import { Markdown } from "../../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
import { FORM_FIELD_LAYOUT_KEY } from "../../../field-layout";
import { schema } from "./schema";
defineOptions({ name: "ShwfedActionsFieldConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
const layout = inject(FORM_FIELD_LAYOUT_KEY, null);
onMounted(() => {
  if (layout) layout.fullPane.value = true;
});
onBeforeUnmount(() => {
  if (layout) layout.fullPane.value = false;
});
const actionValue = computed({
  get: () => ({
    kind: "shwfed.component.action",
    size: "default",
    gap: value.value.gap ?? 4,
    style: value.value.style,
    groups: value.value.groups ?? [],
    items: value.value.items ?? []
  }),
  set: (next) => {
    const { gap, style, groups, items } = next;
    const { style: _drop, ...rest } = value.value;
    value.value = {
      ...rest,
      gap,
      groups,
      items,
      ...style === void 0 ? {} : { style }
    };
  }
});
</script>

<template>
  <ActionsConfigEditor v-model="actionValue">
    <template #general-extra>
      <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 #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>
    </template>
  </ActionsConfigEditor>
</template>
