<script>
import theme from "#build/b24ui/chat-tool";
</script>

<script setup>
import { ref, computed, watch } from "vue";
import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Button from "./Button.vue";
import B24ChatShimmer from "./ChatShimmer.vue";
import LoaderWaitIcon from "@bitrix24/b24icons-vue/animated/LoaderWaitIcon";
import LoaderClockIcon from "@bitrix24/b24icons-vue/animated/LoaderClockIcon";
import SpinnerIcon from "@bitrix24/b24icons-vue/specialized/SpinnerIcon";
const _props = defineProps({
  text: { type: String, required: false },
  suffix: { type: String, required: false },
  icon: { type: [Function, Object], required: false },
  loading: { type: Boolean, required: false, default: false },
  useWait: { type: Boolean, required: false },
  useClock: { type: Boolean, required: false },
  loadingIcon: { type: [Function, Object], required: false },
  streaming: { type: Boolean, required: false, default: false },
  variant: { type: null, required: false, default: "inline" },
  chevron: { type: String, required: false, default: "trailing" },
  chevronIcon: { type: [Function, Object], required: false },
  shimmer: { type: Object, required: false },
  actions: { type: Array, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  defaultOpen: { type: Boolean, required: false },
  open: { type: Boolean, required: false, default: void 0 },
  disabled: { type: Boolean, required: false },
  unmountOnHide: { type: Boolean, required: false, default: false }
});
const emits = defineEmits(["update:open"]);
const slots = defineSlots();
const props = useComponentProps("chatTool", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.chatTool || {} })({
  variant: props.variant,
  chevron: props.chevron,
  loading: Boolean(props.loading),
  useWait: Boolean(props.useWait),
  useClock: Boolean(props.useClock)
}));
const isControlled = computed(() => props.open !== void 0);
const internalOpen = ref(props.defaultOpen ?? false);
const resolvedOpen = computed(() => isControlled.value ? props.open : internalOpen.value);
function setOpen(value) {
  internalOpen.value = value;
  emits("update:open", value);
}
const hasContent = computed(() => !!slots.default);
watch(() => !!props.actions?.length, (hasActions) => {
  if (hasActions && hasContent.value && props.open === void 0 && props.defaultOpen === void 0) {
    internalOpen.value = true;
  }
}, { immediate: true });
const resolvedLoadingIcon = computed(() => {
  if (props.loadingIcon) return props.loadingIcon;
  if (props.useWait) return LoaderWaitIcon;
  if (props.useClock) return LoaderClockIcon;
  return SpinnerIcon;
});
const resolvedIcon = computed(() => props.loading ? resolvedLoadingIcon.value : props.icon);
const chevronIconName = computed(() => props.chevronIcon || icons.chevronDown);
</script>

<template>
  <CollapsibleRoot
    v-slot="{ open: isOpen }"
    :open="resolvedOpen"
    :disabled="props.disabled"
    :unmount-on-hide="props.unmountOnHide"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    @update:open="setOpen"
  >
    <CollapsibleTrigger as-child :disabled="!hasContent">
      <button
        type="button"
        data-slot="trigger"
        :class="b24ui.trigger({ class: props.b24ui?.trigger })"
      >
        <span v-if="resolvedIcon || hasContent && props.chevron === 'leading'" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
          <Component
            :is="resolvedIcon"
            v-if="resolvedIcon"
            data-slot="leadingIcon"
            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon, alone: !(hasContent && props.chevron === 'leading') })"
          />
          <Component
            :is="chevronIconName"
            v-if="hasContent && props.chevron === 'leading'"
            data-slot="chevronIcon"
            :class="b24ui.chevronIcon({ class: props.b24ui?.chevronIcon, alone: !resolvedIcon })"
          />
        </span>

        <span data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
          <B24ChatShimmer v-if="props.streaming && props.text" :text="props.text" v-bind="props.shimmer" />
          <template v-else>{{ props.text }}</template>
          <span v-if="props.suffix" data-slot="suffix" :class="b24ui.suffix({ class: props.b24ui?.suffix })">{{ props.suffix }}</span>
        </span>

        <Component
          :is="chevronIconName"
          v-if="hasContent && props.chevron === 'trailing'"
          data-slot="trailingIcon"
          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
        />
      </button>
    </CollapsibleTrigger>

    <CollapsibleContent data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
      <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
        <slot :open="isOpen" />
      </div>
    </CollapsibleContent>

    <div
      v-if="props.actions?.length || !!slots.actions"
      data-slot="actions"
      :data-state="hasContent && isOpen ? 'open' : 'closed'"
      :class="b24ui.actions({ class: props.b24ui?.actions })"
    >
      <slot name="actions">
        <B24Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
      </slot>
    </div>
  </CollapsibleRoot>
</template>
