<script setup>
import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
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 { Switch } from "../../../../ui/switch";
import { FORM_FIELD_LAYOUT_KEY } from "../../../field-layout";
import {
  getStructFieldDescription,
  getStructFieldTitle
} from "../../../schema";
import ShwfedFormUnitConfig, {
} from "../../../unit-config.vue";
import { schema } from "./schema";
defineOptions({ name: "ShwfedCollapsibleFieldConfig" });
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 unitModel = computed({
  get: () => value.value.unit,
  set: (next) => {
    value.value = { ...value.value, unit: next };
  }
});
const EXTRAS = [
  { id: "general", label: "\u901A\u7528\u914D\u7F6E", icon: "fluent:settings-20-regular" }
];
const selection = ref({ kind: "extras", id: "general" });
const defaultCollapsed = computed({
  get: () => value.value.defaultCollapsed ?? false,
  set: (next) => {
    if (next === true) {
      value.value = { ...value.value, defaultCollapsed: true };
    } else {
      const { defaultCollapsed: _omit, ...rest } = value.value;
      value.value = rest;
    }
  }
});
</script>

<template>
  <ShwfedFormUnitConfig
    v-model="unitModel"
    v-model:selection="selection"
    :extras="EXTRAS"
  >
    <template #extras-pane>
      <div class="flex flex-col gap-2">
        <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('header')"
              #tooltip
            >
              <Markdown
                :source="fieldDescription('header')"
                block
                class="prose prose-sm prose-zinc"
              />
            </template>
            {{ fieldTitle("header") }}
          </FieldLabel>
          <LocaleField
            markdown
            translate-hint="折叠区域标题，行内 Markdown 文本，保留表达式插值占位符不要翻译"
            :model-value="value.header"
            @update:model-value="(v) => value = { ...value, header: v }"
          />
        </Field>

        <Field
          orientation="horizontal"
          class="h-9 w-auto gap-2"
        >
          <Switch v-model="defaultCollapsed" />
          <FieldLabel class="text-sm text-zinc-600">
            <template
              v-if="fieldDescription('defaultCollapsed')"
              #tooltip
            >
              <Markdown
                :source="fieldDescription('defaultCollapsed')"
                block
                class="prose prose-sm prose-zinc"
              />
            </template>
            {{ fieldTitle("defaultCollapsed") }}
          </FieldLabel>
        </Field>
      </div>
    </template>
  </ShwfedFormUnitConfig>
</template>
