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

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { omit } from "../utils";
import { tv } from "../utils/tv";
import B24Button from "./Button.vue";
import B24Tooltip from "./Tooltip.vue";
import B24Avatar from "./Avatar.vue";
const _props = defineProps({
  as: { type: null, required: false, default: "article" },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  variant: { type: null, required: false },
  color: { type: null, required: false },
  side: { type: null, required: false },
  actions: { type: Array, required: false },
  compact: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  id: { type: String, required: true },
  role: { type: String, required: true },
  metadata: { type: null, required: false },
  parts: { type: Array, required: true }
});
const slots = defineSlots();
const props = useComponentProps("chatMessage", _props);
const appConfig = useAppConfig();
const fileParts = computed(() => props.parts?.filter((part) => part.type === "file") ?? []);
const textParts = computed(() => props.parts?.filter((part) => part.type === "text") ?? []);
const messageProps = computed(() => omit(props, ["as", "icon", "avatar", "variant", "color", "side", "actions", "compact", "class", "b24ui"]));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessage || {} })({
  variant: props.variant,
  color: props.color,
  side: props.side,
  leading: !!props.icon || !!props.avatar || !!slots.leading,
  actions: !!props.actions || !!slots.actions,
  compact: props.compact
}));
</script>

<template>
  <Primitive :as="props.as" :data-role="props.role" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div v-if="!!slots.files && fileParts.length || !!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
      <slot name="header" v-bind="{ ...messageProps }">
        <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="b24ui.files({ class: props.b24ui?.files })">
          <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
        </div>
      </slot>
    </div>

    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
      <div v-if="props.icon || props.avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
        <slot name="leading" v-bind="{ ...messageProps, avatar: props.avatar, b24ui }">
          <Component :is="props.icon" v-if="props.icon" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" />
          <B24Avatar
            v-else-if="props.avatar"
            :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
            :color="props.color"
            v-bind="props.avatar"
            data-slot="leadingAvatar"
            :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
          />
        </slot>
      </div>

      <div v-if="textParts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
        <slot name="content" v-bind="{ ...messageProps }">
          <template v-for="(part, index) in textParts" :key="`${props.id}-${part.type}-${index}`">
            {{ part.text }}
          </template>
        </slot>
      </div>

      <div v-if="props.actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
        <slot name="actions" v-bind="{ ...messageProps, actions: props.actions }">
          <B24Tooltip v-for="(action, index) in props.actions" :key="index" :text="action.label">
            <B24Button
              size="sm"
              color="air-secondary-no-accent"
              v-bind="omit(action, ['onClick'])"
              :label="undefined"
              @click="typeof action.onClick === 'function' ? action.onClick($event, messageProps) : void 0"
            />
          </B24Tooltip>
        </slot>
      </div>
    </div>
  </Primitive>
</template>
