<script setup>
import { Separator } from "../../../../ui/separator";
import { Field, FieldLabel } from "../../../../ui/field";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "../../../../ui/select";
import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
import { Markdown } from "../../../../ui/markdown";
import { schema } from "./schema";
defineOptions({ name: "ShwfedTableSelectRendererConfig" });
const value = defineModel({ type: Object, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
const SELECT_MODE_OPTIONS = [
  { value: "checkbox", label: "\u591A\u9009" },
  { value: "radio", label: "\u5355\u9009" }
];
function updateOptionalString(key, next) {
  if (next.trim() === "") {
    const { [key]: _, ...rest } = value.value;
    value.value = rest;
  } else {
    value.value = { ...value.value, [key]: next };
  }
}
</script>

<template>
  <div class="space-y-5">
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('mode')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('mode')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("mode") }}
        </FieldLabel>
        <Select
          :model-value="value.mode ?? 'checkbox'"
          @update:model-value="(v) => value.mode = v"
        >
          <SelectTrigger class="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem
              v-for="opt in SELECT_MODE_OPTIONS"
              :key="opt.value"
              :value="opt.value"
            >
              {{ opt.label }}
            </SelectItem>
          </SelectContent>
        </Select>
      </Field>
    </div>
    <Separator />
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('enableRowSelection')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('enableRowSelection')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("enableRowSelection") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.enableRowSelection ?? ''"
          placeholder="如 row.id != 'foo'"
          result-type="bool"
          class="min-h-10"
          @update:model-value="(v) => updateOptionalString('enableRowSelection', v)"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('enableMultiRowSelection')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('enableMultiRowSelection')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("enableMultiRowSelection") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.enableMultiRowSelection ?? ''"
          placeholder="如 row.id != 'foo'"
          result-type="bool"
          class="min-h-10"
          @update:model-value="(v) => updateOptionalString('enableMultiRowSelection', v)"
        />
      </Field>
    </div>
  </div>
</template>
