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

<script setup>
import { ref, computed } from "vue";
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useLocale } from "../composables/useLocale";
import { useComponentProps } from "../composables/useComponentProps";
import { useDashboard } from "../utils/dashboard";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Button from "./Button.vue";
const _props = defineProps({
  color: { type: null, required: false, default: "air-tertiary" },
  side: { type: String, required: false, default: "left" },
  b24ui: { type: Object, required: false },
  label: { type: String, 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 },
  class: { type: null, required: false },
  icon: { type: [Function, Object], 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 },
  isAction: { type: Boolean, required: false },
  exactActiveClass: { type: String, required: false },
  viewTransition: { type: Boolean, required: false }
});
const props = useComponentProps("dashboardSidebarCollapse", _props);
const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
const { t } = useLocale();
const appConfig = useAppConfig();
const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
} });
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.dashboardSidebarCollapse || {} }));
</script>

<template>
  <B24Button
    v-bind="{
  ...buttonProps,
  'icon': props.icon || (sidebarCollapsed ? icons.panelOpen : icons.panelClose),
  'aria-label': sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse'),
  ...$attrs
}"
    :class="b24ui({ class: [props.b24ui?.base, props.class], side: props.side })"
    @click="collapseSidebar?.(!sidebarCollapsed)"
  />
</template>
