<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 { 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 },
  side: { type: null, required: false },
  actions: { type: Array, required: false },
  compact: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, 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 appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessage || {} })({
  variant: props.variant,
  side: props.side,
  leading: !!props.icon || !!props.avatar || !!slots.leading,
  actions: !!props.actions || !!slots.actions,
  compact: props.compact
}));
</script>

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

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

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