<script setup>
import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import ValidationRulesField from "../../../ValidationRulesField.vue";
import { Field, FieldLabel } from "../../../../ui/field";
import {
  InputGroup,
  InputGroupInput,
  InputGroupNumberField
} 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: "ShwfedListFieldConfig" });
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 FIELD_CEL_SCOPE = {
  item: {
    type: "dyn",
    label: "item",
    description: "\u5F53\u524D\u5217\u8868\u9879",
    value: void 0
  },
  index: {
    type: "number",
    label: "index",
    description: "\u5F53\u524D\u5217\u8868\u9879\u7D22\u5F15\uFF0C\u4ECE 0 \u5F00\u59CB",
    value: void 0
  }
};
const selection = ref({ kind: "extras", id: "general" });
const pathText = computed({
  get: () => value.value.binding ?? "",
  set: (next) => {
    const trimmed = next.trim();
    if (trimmed.length === 0) {
      const { binding: _omit, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, binding: trimmed };
    }
  }
});
function patchOptionalNumber(key, next) {
  if (next == null) {
    const { [key]: _omit, ...rest } = value.value;
    value.value = rest;
  } else {
    value.value = { ...value.value, [key]: next };
  }
}
const reorderable = computed({
  get: () => value.value.reorderable ?? true,
  set: (next) => {
    if (next === true) {
      const { reorderable: _omit, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, reorderable: false };
    }
  }
});
</script>

<template>
  <ShwfedFormUnitConfig
    v-model="unitModel"
    v-model:selection="selection"
    :extras="EXTRAS"
    :field-cel-scope="FIELD_CEL_SCOPE"
  >
    <template #extras-pane>
      <div class="flex flex-col gap-3">
        <div class="grid grid-cols-2 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('binding')"
                #tooltip
              >
                <Markdown
                  :source="fieldDescription('binding')"
                  block
                  class="prose prose-sm prose-zinc"
                />
              </template>
              {{ fieldTitle("binding") }}
            </FieldLabel>
            <InputGroup>
              <InputGroupInput
                v-model="pathText"
                placeholder="例：members"
                class="font-mono"
              />
            </InputGroup>
          </Field>
        </div>

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

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

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

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

        <Field orientation="vertical">
          <FieldLabel class="text-xs text-zinc-500">
            <template
              v-if="fieldDescription('locale')"
              #tooltip
            >
              <Markdown
                :source="fieldDescription('locale')"
                block
                class="prose prose-sm prose-zinc"
              />
            </template>
            {{ fieldTitle("locale") }}
          </FieldLabel>
          <LocaleField
            markdown
            translate-hint="列表项折叠摘要，Markdown 文本，保留表达式插值占位符不要翻译"
            :model-value="value.locale"
            @update:model-value="(v) => value = { ...value, locale: v }"
          />
        </Field>

        <div class="grid grid-cols-3 gap-3">
          <Field orientation="vertical">
            <FieldLabel class="text-xs text-zinc-500">
              <template
                v-if="fieldDescription('min')"
                #tooltip
              >
                <Markdown
                  :source="fieldDescription('min')"
                  block
                  class="prose prose-sm prose-zinc"
                />
              </template>
              {{ fieldTitle("min") }}
            </FieldLabel>
            <InputGroup>
              <InputGroupNumberField
                :model-value="value.min"
                :min="0"
                @update:model-value="(v) => patchOptionalNumber('min', v)"
              />
            </InputGroup>
          </Field>

          <Field orientation="vertical">
            <FieldLabel class="text-xs text-zinc-500">
              <template
                v-if="fieldDescription('max')"
                #tooltip
              >
                <Markdown
                  :source="fieldDescription('max')"
                  block
                  class="prose prose-sm prose-zinc"
                />
              </template>
              {{ fieldTitle("max") }}
            </FieldLabel>
            <InputGroup>
              <InputGroupNumberField
                :model-value="value.max"
                :min="1"
                @update:model-value="(v) => patchOptionalNumber('max', v)"
              />
            </InputGroup>
          </Field>

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

        <div class="grid grid-cols-2 gap-3">
          <Field orientation="vertical">
            <FieldLabel class="text-xs text-zinc-500">
              <template #tooltip>
                <Markdown
                  :source="fieldDescription('required') ?? '\u8FD4\u56DE `true` \u65F6\u663E\u793A\u5FC5\u586B\u661F\u53F7\u5E76\u8981\u6C42\u975E\u7A7A'"
                  block
                  class="prose prose-sm prose-zinc"
                />
              </template>
              {{ fieldTitle("required") }}
            </FieldLabel>
            <ExpressionEditor
              :model-value="value.required ?? ''"
              placeholder="例：form.type == 'company'"
              result-type="bool"
              class="min-h-10"
              @update:model-value="(v) => value = { ...value, required: v.length > 0 ? v : void 0 }"
            />
          </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>

          <Field orientation="vertical">
            <FieldLabel class="text-xs text-zinc-500">
              <template #tooltip>
                <Markdown
                  :source="fieldDescription('disabled') ?? '\u8FD4\u56DE `true` \u65F6\u6574\u4E2A\u5217\u8868\u53EA\u8BFB\uFF0C\u4E0D\u80FD\u65B0\u589E/\u5220\u9664/\u91CD\u6392'"
                  block
                  class="prose prose-sm prose-zinc"
                />
              </template>
              {{ fieldTitle("disabled") }}
            </FieldLabel>
            <ExpressionEditor
              :model-value="value.disabled ?? ''"
              placeholder="例：form.status == 'locked'"
              result-type="bool"
              class="min-h-10"
              @update:model-value="(v) => value = { ...value, disabled: v.length > 0 ? v : void 0 }"
            />
          </Field>
        </div>

        <Field orientation="vertical">
          <FieldLabel class="text-xs text-zinc-500">
            <template #tooltip>
              <Markdown
                :source="fieldDescription('validations')"
                block
                class="prose prose-sm prose-zinc"
              />
            </template>
            {{ fieldTitle("validations") }}
          </FieldLabel>
          <ValidationRulesField
            :model-value="value.validations"
            @update:model-value="(v) => value = { ...value, validations: v.length > 0 ? v : void 0 }"
          />
        </Field>
      </div>
    </template>
  </ShwfedFormUnitConfig>
</template>
