<script>
import theme from "#build/b24ui/dashboard-search";
</script>

<script setup>
import { computed, useTemplateRef } from "vue";
import { useForwardProps } from "reka-ui";
import { defu } from "defu";
import { reactivePick } from "@vueuse/core";
import { useAppConfig, useColorMode, defineShortcuts, useRuntimeHook } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useLocale } from "../composables/useLocale";
import { omit, transformUI } from "../utils";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24CommandPalette from "./CommandPalette.vue";
import B24Modal from "./Modal.vue";
const _props = defineProps({
  size: { type: null, required: false },
  close: { type: [Boolean, Object], required: false, default: true },
  input: { type: [Boolean, Object], required: false },
  shortcut: { type: String, required: false, default: "meta_k" },
  fuse: { type: Object, required: false },
  searchDelay: { type: Number, required: false, default: 100 },
  colorMode: { type: Boolean, required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  title: { type: String, required: false },
  description: { type: String, required: false },
  overlay: { type: Boolean, required: false },
  transition: { type: Boolean, required: false },
  content: { type: Object, required: false },
  dismissible: { type: Boolean, required: false },
  fullscreen: { type: Boolean, required: false, default: false },
  modal: { type: Boolean, required: false },
  portal: { type: [Boolean, String], required: false, skipCheck: true },
  unmountOnHide: { type: Boolean, required: false },
  icon: { type: [Function, Object, Boolean], required: false },
  trailingIcon: { type: [Function, Object], required: false },
  selectedIcon: { type: [Function, Object], required: false },
  childrenIcon: { type: [Function, Object], required: false },
  placeholder: { type: String, required: false },
  autofocus: { type: Boolean, required: false },
  loading: { type: Boolean, required: false },
  closeIcon: { type: [Function, Object], required: false },
  back: { type: [Boolean, Object], required: false },
  backIcon: { type: [Function, Object], required: false },
  disabled: { type: Boolean, required: false },
  highlightOnHover: { type: Boolean, required: false },
  labelKey: { type: null, required: false },
  descriptionKey: { type: null, required: false },
  preserveGroupOrder: { type: Boolean, required: false },
  virtualize: { type: [Boolean, Object], required: false },
  groups: { type: Array, required: false }
});
const slots = defineSlots();
const props = useComponentProps("dashboardSearch", _props);
const open = defineModel("open", { type: Boolean, ...{ default: false } });
const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
useRuntimeHook("dashboard:search:toggle", () => {
  open.value = !open.value;
});
const { t } = useLocale();
const colorMode = useColorMode();
const appConfig = useAppConfig();
const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "trailingIcon", "selectedIcon", "childrenIcon", "placeholder", "autofocus", "loading", "close", "closeIcon", "back", "backIcon", "disabled", "highlightOnHover", "labelKey", "descriptionKey", "preserveGroupOrder", "virtualize", "searchDelay"));
const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal", "unmountOnHide"));
const inputProps = computed(() => {
  if (props.input === false) {
    return false;
  }
  return defu(typeof props.input === "object" ? props.input : {}, { fixed: true });
});
const getProxySlots = () => omit(slots, ["content"]);
const fuse = computed(() => defu({}, props.fuse, {
  fuseOptions: {
    useTokenSearch: true
  }
}));
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.dashboardSearch || {} })({
  size: props.size,
  fullscreen: props.fullscreen
}));
const groups = computed(() => {
  const groups2 = [];
  groups2.push(...props.groups || []);
  if (props.colorMode && !colorMode?.forced) {
    groups2.push({
      id: "theme",
      label: t("dashboardSearch.theme"),
      items: [
        {
          label: t("colorMode.system"),
          icon: icons.system,
          active: colorMode.preference === "system",
          onSelect: () => {
            colorMode.preference = "system";
          }
        },
        {
          label: t("colorMode.light"),
          icon: icons.light,
          active: colorMode.preference === "light",
          onSelect: () => {
            colorMode.preference = "light";
          }
        },
        {
          label: t("colorMode.dark"),
          icon: icons.dark,
          active: colorMode.preference === "dark",
          onSelect: () => {
            colorMode.preference = "dark";
          }
        }
      ]
    });
  }
  return groups2;
});
const commandPaletteRef = useTemplateRef("commandPaletteRef");
function onSelect(item) {
  if (item.disabled) {
    return;
  }
  open.value = false;
  searchTerm.value = "";
}
defineShortcuts({
  [props.shortcut]: {
    usingInput: true,
    handler: () => open.value = !open.value
  }
});
defineExpose({
  commandPaletteRef
});
</script>

<template>
  <B24Modal
    v-model:open="open"
    :title="props.title || t('dashboardSearch.title')"
    :description="props.description || t('dashboardSearch.description')"
    v-bind="modalProps"
    data-slot="modal"
    :class="b24ui.modal({ class: [props.b24ui?.modal, props.class] })"
  >
    <template #content="contentData">
      <slot name="content" v-bind="contentData">
        <B24CommandPalette
          ref="commandPaletteRef"
          v-model:search-term="searchTerm"
          v-bind="commandPaletteProps"
          :groups="groups"
          :fuse="fuse"
          :input="inputProps"
          :b24ui="transformUI(omit(b24ui, ['modal']), props.b24ui)"
          @update:model-value="onSelect"
          @update:open="open = $event"
        >
          <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
            <slot :name="name" v-bind="slotData" />
          </template>
        </B24CommandPalette>
      </slot>
    </template>
  </B24Modal>
</template>
