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

<script setup>
import { computed, toRef } from "vue";
import { useForwardProps } from "reka-ui";
import { defu } from "defu";
import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useContentSearch } from "../../composables/useContentSearch";
import { useLocale } from "../../composables/useLocale";
import { omit, transformUI } from "../../utils";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24Button from "../Button.vue";
import B24Kbd from "../Kbd.vue";
import B24Tooltip from "../Tooltip.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  icon: { type: [Function, Object], required: false },
  label: { type: String, required: false },
  color: { type: null, required: false, default: "air-tertiary-no-accent" },
  collapsed: { type: Boolean, required: false, default: true },
  tooltip: { type: [Boolean, Object], required: false, default: false },
  kbds: { type: Array, required: false, default: () => ["meta", "k"] },
  b24ui: { type: void 0, required: false },
  class: { type: null, required: false },
  activeColor: { type: null, required: false },
  depth: { type: null, required: false },
  activeDepth: { type: null, required: false },
  size: { type: null, required: false },
  rounded: { type: Boolean, required: false },
  block: { type: Boolean, required: false },
  loadingAuto: { type: Boolean, required: false },
  normalCase: { type: Boolean, required: false },
  useWait: { type: Boolean, required: false },
  useClock: { type: Boolean, required: false },
  useDropdown: { type: Boolean, required: false },
  onClick: { type: [Function, Array], required: false },
  activeClass: { type: String, required: false },
  inactiveClass: { type: String, required: false },
  avatar: { type: Object, required: false },
  loading: { type: Boolean, required: false },
  as: { type: null, required: false },
  type: { type: null, required: false },
  disabled: { type: Boolean, required: false },
  active: { type: Boolean, required: false },
  exact: { type: Boolean, required: false },
  exactQuery: { type: [Boolean, String], required: false },
  exactHash: { type: Boolean, required: false },
  isAction: { type: Boolean, required: false },
  to: { type: null, required: false },
  href: { type: null, required: false },
  external: { type: Boolean, required: false },
  target: { type: [String, Object, null], required: false },
  rel: { type: [String, Object, null], required: false },
  noRel: { type: Boolean, required: false },
  prefetchedClass: { type: String, required: false },
  prefetch: { type: Boolean, required: false },
  prefetchOn: { type: [String, Object], required: false },
  noPrefetch: { type: Boolean, required: false },
  trailingSlash: { type: String, required: false },
  exactActiveClass: { type: String, required: false },
  ariaCurrentValue: { type: String, required: false },
  viewTransition: { type: Boolean, required: false },
  replace: { type: Boolean, required: false }
});
const slots = defineSlots();
const [DefineButtonTemplate, ReuseButtonTemplate] = createReusableTemplate();
const getProxySlots = () => omit(slots, ["trailing"]);
const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "collapsed", "tooltip", "kbds", "class", "b24ui"));
const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
const { t } = useLocale();
const { open } = useContentSearch();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.contentSearchButton || {} })({
  collapsed: props.collapsed
}));
</script>

<template>
  <DefineButtonTemplate>
    <B24Button
      :icon="icon || icons.search"
      :label="label || t('contentSearchButton.label')"
      v-bind="{
  ...buttonProps,
  ...collapsed ? {
    'aria-label': label || t('contentSearchButton.label')
  } : {
    color: 'air-secondary-no-accent'
  },
  ...$attrs
}"
      data-slot="base"
      :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
      :b24ui="transformUI(b24ui, props.b24ui)"
      @click="open = true"
    >
      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>

      <template #trailing="{ b24ui: b24uiProxy }">
        <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
          <slot name="trailing" :b24ui="b24uiProxy">
            <template v-if="kbds?.length">
              <B24Kbd
                v-for="(kbd, index) in kbds"
                :key="index"
                v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
              />
            </template>
          </slot>
        </div>
      </template>
    </B24Button>
  </DefineButtonTemplate>

  <B24Tooltip v-if="collapsed && tooltip" :text="label || t('contentSearchButton.label')" v-bind="tooltipProps">
    <ReuseButtonTemplate />
  </B24Tooltip>
  <ReuseButtonTemplate v-else />
</template>
