import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = {
  class: "message-content"
};
const _hoisted_2 = {
  key: 0,
  class: "message-image"
};
const _hoisted_3 = ["src"];
const _hoisted_4 = {
  key: 1,
  class: "message-text-header"
};
const _hoisted_5 = {
  key: 0,
  class: "message-typing-indicator"
};
const _hoisted_6 = /*#__PURE__*/_createElementVNode("div", null, null, -1);
const _hoisted_7 = /*#__PURE__*/_createElementVNode("div", null, null, -1);
const _hoisted_8 = /*#__PURE__*/_createElementVNode("div", null, null, -1);
const _hoisted_9 = [_hoisted_6, _hoisted_7, _hoisted_8];
const _hoisted_10 = {
  key: 3,
  class: "message-text-footer"
};
function render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", {
    class: _normalizeClass(_ctx.classes),
    onClick: _cache[6] || (_cache[6] = function () {
      return _ctx.onClick && _ctx.onClick(...arguments);
    })
  }, [_renderSlot(_ctx.$slots, "start"), _ctx.hasAvatar ? (_openBlock(), _createElementBlock("div", {
    key: 0,
    class: "message-avatar",
    style: _normalizeStyle({
      backgroundImage: _ctx.avatar && `url(${_ctx.avatar})`
    }),
    onClick: _cache[0] || (_cache[0] = function () {
      return _ctx.onAvatarClick && _ctx.onAvatarClick(...arguments);
    })
  }, [_renderSlot(_ctx.$slots, "avatar")], 4)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "content-start"), _ctx.hasName ? (_openBlock(), _createElementBlock("div", {
    key: 0,
    class: "message-name",
    onClick: _cache[1] || (_cache[1] = function () {
      return _ctx.onNameClick && _ctx.onNameClick(...arguments);
    })
  }, [_createTextVNode(_toDisplayString(_ctx.name) + " ", 1), _renderSlot(_ctx.$slots, "name")])) : _createCommentVNode("", true), _ctx.hasHeader ? (_openBlock(), _createElementBlock("div", {
    key: 1,
    class: "message-header",
    onClick: _cache[2] || (_cache[2] = function () {
      return _ctx.onHeaderClick && _ctx.onHeaderClick(...arguments);
    })
  }, [_createTextVNode(_toDisplayString(_ctx.header) + " ", 1), _renderSlot(_ctx.$slots, "header")])) : _createCommentVNode("", true), _createElementVNode("div", {
    class: "message-bubble",
    onClick: _cache[4] || (_cache[4] = function () {
      return _ctx.onBubbleClick && _ctx.onBubbleClick(...arguments);
    })
  }, [_renderSlot(_ctx.$slots, "bubble-start"), _ctx.hasImage ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "image", {}, () => [_createElementVNode("img", {
    src: _ctx.image
  }, null, 8, _hoisted_3)])])) : _createCommentVNode("", true), _ctx.hasTextHeader ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_createTextVNode(_toDisplayString(_ctx.textHeader) + " ", 1), _renderSlot(_ctx.$slots, "text-header")])) : _createCommentVNode("", true), _ctx.hasText ? (_openBlock(), _createElementBlock("div", {
    key: 2,
    class: "message-text",
    onClick: _cache[3] || (_cache[3] = function () {
      return _ctx.onTextClick && _ctx.onTextClick(...arguments);
    })
  }, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _ctx.typing ? (_openBlock(), _createElementBlock("div", _hoisted_5, _hoisted_9)) : _createCommentVNode("", true)])) : _createCommentVNode("", true), _ctx.hasTextFooter ? (_openBlock(), _createElementBlock("div", _hoisted_10, [_createTextVNode(_toDisplayString(_ctx.textFooter) + " ", 1), _renderSlot(_ctx.$slots, "text-footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "bubble-end"), _renderSlot(_ctx.$slots, "default")]), _ctx.hasFooter ? (_openBlock(), _createElementBlock("div", {
    key: 2,
    class: "message-footer",
    onClick: _cache[5] || (_cache[5] = function () {
      return _ctx.onFooterClick && _ctx.onFooterClick(...arguments);
    })
  }, [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "end")], 2);
}
import { computed } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
export default {
  name: 'f7-message',
  render,
  props: {
    text: String,
    name: String,
    avatar: String,
    type: {
      type: String,
      default: 'sent'
    },
    image: String,
    header: String,
    footer: String,
    textHeader: String,
    textFooter: String,
    first: Boolean,
    last: Boolean,
    tail: Boolean,
    sameName: Boolean,
    sameHeader: Boolean,
    sameFooter: Boolean,
    sameAvatar: Boolean,
    typing: Boolean,
    ...colorProps
  },
  emits: ['click', 'click:name', 'click:text', 'click:avatar', 'click:header', 'click:footer', 'click:bubble'],
  setup(props, _ref) {
    let {
      emit,
      slots
    } = _ref;
    const onClick = event => {
      emit('click', event);
    };
    const onNameClick = event => {
      emit('click:name', event);
    };
    const onTextClick = event => {
      emit('click:text', event);
    };
    const onAvatarClick = event => {
      emit('click:avatar', event);
    };
    const onHeaderClick = event => {
      emit('click:header', event);
    };
    const onFooterClick = event => {
      emit('click:footer', event);
    };
    const onBubbleClick = event => {
      emit('click:bubble', event);
    };
    const classes = computed(() => classNames('message', {
      'message-sent': props.type === 'sent',
      'message-received': props.type === 'received',
      'message-typing': props.typing,
      'message-first': props.first,
      'message-last': props.last,
      'message-tail': props.tail,
      'message-same-name': props.sameName,
      'message-same-header': props.sameHeader,
      'message-same-footer': props.sameFooter,
      'message-same-avatar': props.sameAvatar
    }, colorClasses(props)));
    const hasAvatar = computed(() => slots.avatar || props.avatar);
    const hasName = computed(() => slots.name || props.name);
    const hasHeader = computed(() => slots.header || props.header);
    const hasImage = computed(() => slots.image || props.image);
    const hasTextHeader = computed(() => slots['text-header'] || props.textHeader);
    const hasText = computed(() => slots.text || props.text || props.typing);
    const hasTextFooter = computed(() => slots['text-footer'] || props.textFooter);
    const hasFooter = computed(() => slots.footer || props.footer);
    return {
      classes,
      onClick,
      onNameClick,
      onTextClick,
      onAvatarClick,
      onHeaderClick,
      onFooterClick,
      onBubbleClick,
      hasAvatar,
      hasName,
      hasHeader,
      hasImage,
      hasTextHeader,
      hasText,
      hasTextFooter,
      hasFooter
    };
  }
};