<script setup>
import { Popover, PopoverTrigger, PopoverContent } from "../popover";
import { Command, CommandList, CommandEmpty } from "../command";
import InputGroupComboboxInput from "./InputGroupComboboxInput.vue";
import { Icon } from "@iconify/vue";
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { getInputGroupReference } from ".";
const { t } = useI18n({
  inheritLocale: true,
  messages: {
    zh: { "input-combobox-empty": "\u65E0\u641C\u7D22\u7ED3\u679C" },
    ja: { "input-combobox-empty": "\u7D50\u679C\u306F\u3042\u308A\u307E\u305B\u3093" },
    en: { "input-combobox-empty": "No results" }
  }
});
const props = defineProps({
  forceMount: { type: Boolean, required: false },
  side: { type: null, required: false },
  sideOffset: { type: Number, required: false },
  sideFlip: { type: Boolean, required: false },
  align: { type: null, required: false },
  alignOffset: { type: Number, required: false },
  alignFlip: { type: Boolean, required: false },
  avoidCollisions: { type: Boolean, required: false },
  collisionBoundary: { type: null, required: false },
  collisionPadding: { type: [Number, Object], required: false },
  arrowPadding: { type: Number, required: false },
  hideShiftedArrow: { type: Boolean, required: false },
  sticky: { type: String, required: false },
  hideWhenDetached: { type: Boolean, required: false },
  positionStrategy: { type: String, required: false },
  updatePositionStrategy: { type: String, required: false },
  disableUpdateOnLayoutShift: { type: Boolean, required: false },
  prioritizePosition: { type: Boolean, required: false },
  reference: { type: null, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  disableOutsidePointerEvents: { type: Boolean, required: false },
  disabled: { type: Boolean, required: false },
  invalid: { type: Boolean, required: false }
});
const emits = defineEmits(["blur"]);
const delegatedProps = reactiveOmit(props, "disabled", "invalid");
const forwarded = useForwardProps(delegatedProps);
const open = ref(false);
</script>

<template>
  <Command
    as-child
    :disabled="props.disabled"
    @update:model-value="open = false"
  >
    <Popover v-model:open="open">
      <PopoverTrigger
        as="input"
        as-child
      >
        <InputGroupComboboxInput
          :invalid="props.invalid"
          @blur="emits('blur', $event)"
        />
      </PopoverTrigger>
      <PopoverContent
        v-bind="forwarded"
        :reference="getInputGroupReference().value ?? void 0"
        :style="{
  width: 'var(--reka-popover-trigger-width)'
}"
      >
        <CommandList>
          <CommandEmpty as-child>
            <section class="h-32 flex flex-col text-lg items-center justify-center gap-2 select-none">
              <Icon
                icon="fluent:app-recent-20-regular"
                class="text-zinc-400 text-2xl!"
              />
              <p class="text-zinc-500">
                {{ t("input-combobox-empty") }}
              </p>
            </section>
          </CommandEmpty>
          <slot />
        </CommandList>
      </PopoverContent>
    </Popover>
  </Command>
</template>
