/**
 * @license
 * Copyright (c) 2021 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import '@vaadin/avatar/src/vaadin-avatar.js';
import { html, LitElement } from 'lit';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { messageStyles } from './styles/vaadin-message-base-styles.js';
import { MessageMixin } from './vaadin-message-mixin.js';

/**
 * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
 *
 * ```html
 * <vaadin-message
 *   time="2021-01-28 10:43"
 *   user-name="Bob Ross"
 *   user-abbr="BR"
 *   user-img="/static/img/avatar.jpg"
 * >
 *  There is no real ending. It's just the place where you stop the story.
 * </vaadin-message>
 * ```
 *
 * ### Styling
 *
 * The following shadow DOM parts are available for styling:
 *
 * Part name           | Description
 * --------------------|----------------
 * `name`              | Author's name
 * `time`              | When the message was posted
 * `content`           | The message itself as a slotted content
 * `attachments`       | Container for the attachments
 * `attachment`        | Individual attachment button
 * `attachment-image`  | Image attachment button (in addition to `attachment`)
 * `attachment-file`   | File attachment button (in addition to `attachment`)
 * `attachment-preview`| Image preview inside an image attachment
 * `attachment-icon`   | File icon inside a file attachment
 * `attachment-name`   | File name inside a file attachment
 *
 * The following state attributes are available for styling:
 *
 * Attribute    | Description
 * -------------|-------------
 * `focus-ring` | Set when the message is focused using the keyboard.
 * `focused`    | Set when the message is focused.
 *
 * The following custom CSS properties are available for styling:
 *
 * Custom CSS property                          |
 * :------------------------------------------- |
 * `--vaadin-message-attachment-background`     |
 * `--vaadin-message-attachment-border-color`   |
 * `--vaadin-message-attachment-border-radius`  |
 * `--vaadin-message-attachment-border-width`   |
 * `--vaadin-message-attachment-font-size`      |
 * `--vaadin-message-attachment-font-weight`    |
 * `--vaadin-message-attachment-gap`            |
 * `--vaadin-message-attachment-line-height`    |
 * `--vaadin-message-attachment-padding`        |
 * `--vaadin-message-attachment-text-color`     |
 * `--vaadin-message-font-size`                 |
 * `--vaadin-message-font-weight`               |
 * `--vaadin-message-gap`                       |
 * `--vaadin-message-header-line-height`        |
 * `--vaadin-message-line-height`               |
 * `--vaadin-message-name-color`                |
 * `--vaadin-message-name-font-size`            |
 * `--vaadin-message-name-font-weight`          |
 * `--vaadin-message-padding`                   |
 * `--vaadin-message-text-color`                |
 * `--vaadin-message-time-color`                |
 * `--vaadin-message-time-font-size`            |
 * `--vaadin-message-time-font-weight`          |
 *
 * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
 *
 * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
 *
 * @customElement vaadin-message
 * @extends HTMLElement
 * @mixes MessageMixin
 * @mixes ThemableMixin
 * @mixes ElementMixin
 */
class Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
  static get is() {
    return 'vaadin-message';
  }

  static get styles() {
    return messageStyles;
  }

  static get lumoInjector() {
    return { ...super.lumoInjector, includeBaseStyles: true };
  }

  /** @protected */
  render() {
    return html`
      <slot name="avatar"></slot>
      <div part="content">
        <div part="header">
          <span part="name">${this.userName}</span>
          <span part="time">${this.time}</span>
        </div>
        ${this.__renderAttachments()}
        <div part="message"><slot></slot></div>
      </div>
    `;
  }
}

defineCustomElement(Message);

export { Message };
