<script setup>
import { computed, defineAsyncComponent, inject, onBeforeUnmount, onMounted } from "vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import ValidationRulesField from "../../../ValidationRulesField.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 { FORM_FIELD_LAYOUT_KEY } from "../../../field-layout";
import { getStructFieldDescription, getStructFieldTitle, registerFormVariablesIfAbsent } from "../../../schema";
import { schema } from "./schema";
defineOptions({ name: "ShwfedTableFieldConfig" });
const TableConfigEditor = defineAsyncComponent(() => import("../../../../table/config.vue"));
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;
});
function configureEmbeddedTable(env) {
  registerFormVariablesIfAbsent(env);
}
const tableModel = computed({
  get: () => {
    const { dataSource: _omit, ...rest } = value.value.table;
    return rest;
  },
  set: (next) => {
    const { dataSource: _omit, ...rest } = next;
    value.value = {
      ...value.value,
      table: rest
    };
  }
});
const bindingText = 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 };
    }
  }
});
</script>

<template>
  <TableConfigEditor
    v-model="tableModel"
    :configure="configureEmbeddedTable"
    hide-display-name
    hide-data-source
  >
    <template #general-grid-extra>
      <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="bindingText"
            placeholder="例：rows"
            class="font-mono"
          />
        </InputGroup>
      </Field>
    </template>

    <template #general-extra>
      <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 #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>
      </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>
    </template>
  </TableConfigEditor>
</template>
