<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { format as formatDate } from "date-fns";
import { Input } from "../../../../ui/input";
import { Separator } from "../../../../ui/separator";
import { Field, FieldLabel } from "../../../../ui/field";
import { Locale } from "../../../../ui/locale";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupNumberField,
  InputGroupText
} 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: "ShwfedTableDateRendererConfig" });
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 dateFormatExample = computed(() => {
  const fmt = value.value?.format;
  if (!fmt) return "";
  try {
    return formatDate(/* @__PURE__ */ new Date(), fmt);
  } catch {
    return "(\u65E0\u6548\u683C\u5F0F)";
  }
});
</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('accessor')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('accessor')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("accessor") }}
        </FieldLabel>
        <Input
          :model-value="value.accessor"
          placeholder="如 row.joinDate"
          class="font-mono text-xs"
          @update:model-value="(v) => value = { ...value, accessor: v }"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('format')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('format')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("format") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            :model-value="value.format"
            placeholder="yyyy-MM-dd"
            class="font-mono text-xs"
            @update:model-value="(v) => value = { ...value, format: v }"
          />
          <InputGroupAddon
            v-if="dateFormatExample"
            align="inline-end"
          >
            <InputGroupText class="text-xs text-zinc-400">
              {{ dateFormatExample }}
            </InputGroupText>
          </InputGroupAddon>
        </InputGroup>
      </Field>
      <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>
    </div>
    <Separator />
    <div class="flex flex-wrap gap-x-8 gap-y-3">
      <Field
        orientation="vertical"
        class="w-full max-w-xs"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('enableSorting')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('enableSorting')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("enableSorting") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            :model-value="value.sortKey"
            placeholder="例：created_at"
            @update:model-value="(v) => value = { ...value, sortKey: v || void 0 }"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.enableSorting ? 'primary' : 'ghost'"
              size="xs"
              @click="value = { ...value, enableSorting: !value.enableSorting }"
            >
              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
              {{ fieldTitle("enableSorting") }}
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
    </div>
  </div>
</template>
