<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Field, FieldLabel } from "../../../../ui/field";
import { Locale } from "../../../../ui/locale";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupNumberField
} from "../../../../ui/input-group";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "../../../../ui/dropdown-menu";
import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
import { Markdown } from "../../../../ui/markdown";
import { schema } from "./schema";
defineOptions({ name: "ShwfedTableMarkdownRendererConfig" });
const value = defineModel({ type: Object, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
const ALIGN_OPTIONS = [
  { value: "left", label: "\u5DE6\u5BF9\u9F50", icon: "fluent:text-align-left-20-regular" },
  { value: "center", label: "\u5C45\u4E2D", icon: "fluent:text-align-center-20-regular" },
  { value: "right", label: "\u53F3\u5BF9\u9F50", icon: "fluent:text-align-right-20-regular" }
];
const currentAlignIcon = computed(
  () => (ALIGN_OPTIONS.find((o) => o.value === (value.value.align ?? "left")) ?? ALIGN_OPTIONS[0]).icon
);
const copyExpressionModel = computed({
  get: () => value.value.copyExpression ?? "",
  set: (v) => {
    if (v === "") {
      const { copyExpression: _drop, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, copyExpression: v };
    }
  }
});
</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('title')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('title')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("title") }}
        </FieldLabel>
        <Locale
          :model-value="value.title"
          @update:model-value="(v) => value = { ...value, title: 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>
        <Locale
          :model-value="value.tooltip"
          markdown
          @update:model-value="(v) => value = { ...value, tooltip: v }"
        />
      </Field>
    </div>
    <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('size')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('size')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("size") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupAddon align="inline-start">
            <DropdownMenu>
              <DropdownMenuTrigger as-child>
                <InputGroupButton
                  variant="ghost"
                  size="xs"
                  :title="fieldTitle('align')"
                >
                  <Icon :icon="currentAlignIcon" />
                </InputGroupButton>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                <DropdownMenuItem
                  v-for="opt in ALIGN_OPTIONS"
                  :key="opt.value"
                  @select="value = { ...value, align: opt.value }"
                >
                  <Icon :icon="opt.icon" />
                  {{ opt.label }}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </InputGroupAddon>
          <InputGroupNumberField
            :model-value="value.size"
            :disabled="value.grow"
            :min="0"
            @update:model-value="(v) => value = { ...value, size: v }"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.grow ? 'primary' : 'ghost'"
              size="xs"
              @click="value = { ...value, grow: !value.grow }"
            >
              <Icon :icon="value.grow ? 'fluent:lock-closed-20-regular' : 'fluent:arrow-autofit-width-20-regular'" />
              {{ fieldTitle("grow") }}
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('copyExpression')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('copyExpression')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("copyExpression") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="copyExpressionModel"
          placeholder="如 row.name 或 row.?name"
          :result-type="['string', 'optional']"
          class="min-h-10"
        />
      </Field>
    </div>
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('markdown')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('markdown')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("markdown") }}
      </FieldLabel>
      <Locale
        :model-value="value.markdown"
        @update:model-value="(v) => value = { ...value, markdown: v }"
      />
    </Field>
  </div>
</template>
