<script setup>
import { Icon } from "@iconify/vue";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupCombobox
} from "../../../../ui/input-group";
import { CommandGroup, CommandItem } from "../../../../ui/command";
import { BUTTONS } from "../../../utils/resolve";
import { type as prototypeType } from "./schema";
defineOptions({ name: "ShwfedPrototypeActionConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const PICKER_ENTRIES = (() => {
  const byType = /* @__PURE__ */ new Map();
  for (const a of BUTTONS) {
    if (a.type === prototypeType) continue;
    if (a.deprecated) continue;
    const prev = byType.get(a.type);
    if (!prev || a.compatibilityDate > prev.compatibilityDate) {
      byType.set(a.type, {
        type: a.type,
        compatibilityDate: a.compatibilityDate,
        name: a.metadata.name,
        icon: a.metadata.icon
      });
    }
  }
  return [...byType.values()].sort((a, b) => a.name.localeCompare(b.name, "zh"));
})();
function convert(nextType, nextCompatibilityDate) {
  value.value = { type: nextType, compatibilityDate: nextCompatibilityDate };
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <p class="text-xs text-zinc-500">
      原型按钮点击后无任何副作用，用于占位。选择下方任意类型可将其转换为正式按钮 —— 此转换仅能进行一次。
    </p>
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <Icon icon="fluent:arrow-swap-20-regular" />
      </InputGroupAddon>
      <InputGroupCombobox>
        <CommandGroup>
          <CommandItem
            v-for="entry in PICKER_ENTRIES"
            :key="entry.type"
            :value="entry.type"
            @select="convert(entry.type, entry.compatibilityDate)"
          >
            <Icon
              :icon="entry.icon"
              class="size-4 shrink-0"
            />
            <span class="flex-1">{{ entry.name }}</span>
            <span class="ml-auto text-xs tabular-nums text-zinc-400">{{ entry.compatibilityDate }}</span>
          </CommandItem>
        </CommandGroup>
      </InputGroupCombobox>
    </InputGroup>
  </div>
</template>
