/**
 * @license
 * Copyright (c) 2021 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { type MessageListAttachmentClickEvent, MessageListMixin } from './vaadin-message-list-mixin.js';

export {
  MessageAttachment,
  MessageAttachmentClickEvent,
  MessageListAttachmentClickEvent,
  MessageListItem,
} from './vaadin-message-list-mixin.js';

export type MessageListEventMap = HTMLElementEventMap & {
  'attachment-click': MessageListAttachmentClickEvent;
};

/**
 * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
 *
 * ### Example
 *
 * To create a new message list, add the component to the page:
 *
 * ```html
 * <vaadin-message-list></vaadin-message-list>
 * ```
 *
 * Provide the messages to the message list with the [`items`](#/elements/vaadin-message-list#property-items) property.
 *
 * ```js
 * document.querySelector('vaadin-message-list').items = [
 *   { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },
 *   { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }
 * ];
 * ```
 *
 * ### Styling
 *
 * The following shadow DOM parts are available for styling:
 *
 * Part name | Description
 * ----------|----------------
 * `list`    | The container wrapping messages.
 *
 * The following custom CSS properties are available for styling:
 *
 * Custom CSS property                |
 * :--------------------------------- |
 * `--vaadin-message-list-max-width`  |
 * `--vaadin-message-list-padding`    |
 *
 * ### Built-in Theme Variants
 *
 * `<vaadin-message-list>` supports the following theme variants:
 *
 * Theme variant        | Description
 * ---------------------|---------------
 * `theme="bubble"`     | Shows the messages as chat bubbles
 * `theme="one-to-one"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`
 *
 * See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
 * theme variants, state attributes and stylable shadow parts of message elements.
 *
 * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
 *
 * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
 */
declare class MessageList extends SlotStylesMixin(MessageListMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
  addEventListener<K extends keyof MessageListEventMap>(
    type: K,
    listener: (this: MessageList, ev: MessageListEventMap[K]) => void,
    options?: AddEventListenerOptions | boolean,
  ): void;

  removeEventListener<K extends keyof MessageListEventMap>(
    type: K,
    listener: (this: MessageList, ev: MessageListEventMap[K]) => void,
    options?: EventListenerOptions | boolean,
  ): void;
}

declare global {
  interface HTMLElementTagNameMap {
    'vaadin-message-list': MessageList;
  }
}

export { MessageList };