import * as i0 from '@angular/core';
import { Component, Input, inject, DestroyRef, ElementRef, ViewChildren, NgModule } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AsyncPipe, NgClass } from '@angular/common';
import { LocalizedDatePipe } from '@seniorsistemas/angular-components/locale';
import * as i1 from '@ngx-translate/core';
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';

/**
 * @description Componente que renderiza uma única mensagem de chat.
 * Exibe o conteúdo textual, o remetente (próprio ou terceiro) e suporte a
 * anexos via `attachmentUrl`, exibindo o nome do arquivo automaticamente.
 *
 * @example
 * ```html
 * <s-chat-message [message]="item" />
 * ```
 *
 * @category Inputs
 */
class ChatMessageComponent {
    /**
     * @description Objeto com os dados da mensagem a ser exibida,
     * incluindo texto, remetente e URL de anexo. Campo obrigatório.
     */
    message;
    fileName = null;
    ngOnChanges(changes) {
        if (changes['message']) {
            this.fileName = this.message.attachmentUrl ? this.getFileNameByUrl(this.message.attachmentUrl) : null;
        }
    }
    getFileNameByUrl(path) {
        const regex = /[^\\/]+$/;
        const match = regex.exec(path);
        return match ? match[0] : null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatMessageComponent, isStandalone: true, selector: "s-chat-message", inputs: { message: "message" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"flex py-[10px] px-5\"\r\n    [class.justify-end]=\"message.isMine\"\r\n>\r\n    <div\r\n        class=\"inline-flex flex-col max-w-[85%] p-5\"\r\n        [ngClass]=\"message.isMine\r\n            ? 'bg-grayscale-10 rounded-tl-[16px] rounded-tr-[16px] rounded-br-none rounded-bl-[16px]'\r\n            : 'bg-clairvoyant-100 rounded-tl-[16px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-none'\"\r\n    >\r\n        <div class=\"flex items-center text-grayscale-100 font-open-sans gap-2\">\r\n            <img\r\n                class=\"rounded-[50%] overflow-hidden h-8 w-8 object-cover object-center bg-grayscale-0\"\r\n                [src]=\"message.thumbnailUrl\"\r\n                alt=\"Thumbnail\"\r\n            />\r\n            <span class=\"text-sm font-bold\">{{ message.senderName }}</span>\r\n            @if (message.sentAt) {\r\n                <span class=\"text-xs\">{{ message.sentAt | localizedDate: 'L LTS' | async }}</span>\r\n            }\r\n        </div>\r\n        <p class=\"text-grayscale-100 font-open-sans text-xs\">{{ message.text }}</p>\r\n\r\n        @if (message.attachmentUrl) {\r\n            <div class=\"flex items-center gap-[10px] mt-3 select-none flex-wrap\">\r\n                <span class=\"text-grayscale-100 font-open-sans text-xs font-bold\">{{ 'platform.angular_components.attachment' | translate }}:</span>\r\n                <a\r\n                    class=\"bg-grayscale-0 rounded-medium px-3 no-underline\"\r\n                    [href]=\"message.attachmentUrl\"\r\n                    [download]=\"fileName\"\r\n                    >{{ fileName }}</a\r\n                >\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-chat-message', standalone: true, imports: [AsyncPipe, NgClass, LocalizedDatePipe, TranslatePipe], template: "<div\r\n    class=\"flex py-[10px] px-5\"\r\n    [class.justify-end]=\"message.isMine\"\r\n>\r\n    <div\r\n        class=\"inline-flex flex-col max-w-[85%] p-5\"\r\n        [ngClass]=\"message.isMine\r\n            ? 'bg-grayscale-10 rounded-tl-[16px] rounded-tr-[16px] rounded-br-none rounded-bl-[16px]'\r\n            : 'bg-clairvoyant-100 rounded-tl-[16px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-none'\"\r\n    >\r\n        <div class=\"flex items-center text-grayscale-100 font-open-sans gap-2\">\r\n            <img\r\n                class=\"rounded-[50%] overflow-hidden h-8 w-8 object-cover object-center bg-grayscale-0\"\r\n                [src]=\"message.thumbnailUrl\"\r\n                alt=\"Thumbnail\"\r\n            />\r\n            <span class=\"text-sm font-bold\">{{ message.senderName }}</span>\r\n            @if (message.sentAt) {\r\n                <span class=\"text-xs\">{{ message.sentAt | localizedDate: 'L LTS' | async }}</span>\r\n            }\r\n        </div>\r\n        <p class=\"text-grayscale-100 font-open-sans text-xs\">{{ message.text }}</p>\r\n\r\n        @if (message.attachmentUrl) {\r\n            <div class=\"flex items-center gap-[10px] mt-3 select-none flex-wrap\">\r\n                <span class=\"text-grayscale-100 font-open-sans text-xs font-bold\">{{ 'platform.angular_components.attachment' | translate }}:</span>\r\n                <a\r\n                    class=\"bg-grayscale-0 rounded-medium px-3 no-underline\"\r\n                    [href]=\"message.attachmentUrl\"\r\n                    [download]=\"fileName\"\r\n                    >{{ fileName }}</a\r\n                >\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n" }]
        }], propDecorators: { message: [{
                type: Input,
                args: [{ required: true }]
            }] } });

/**
 * @description Componente de interface de chat que exibe uma lista de mensagens
 * e faz scroll automático até a última mensagem sempre que novas são adicionadas.
 * Renderiza cada mensagem via {@link ChatMessageComponent}.
 *
 * @example
 * ```html
 * <s-chat [messages]="conversaMensagens" />
 * ```
 *
 * @category Inputs
 */
class ChatComponent {
    _destroyRef = inject(DestroyRef);
    /**
     * @description Lista de mensagens exibidas no chat.
     * Cada item é do tipo {@link ChatMessage}, contendo texto, remetente e demais metadados.
     *
     * @default []
     */
    messages = [];
    messageElements = null;
    ngAfterViewInit() {
        this.scrollToBottom();
        this.messageElements?.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
            this.scrollToBottom();
        });
    }
    scrollToBottom() {
        this.messageElements?.last?.nativeElement.scrollIntoView({ behavior: 'smooth' });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatComponent, isStandalone: true, selector: "s-chat", inputs: { messages: "messages" }, viewQueries: [{ propertyName: "messageElements", predicate: ["messageElements"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"min-h-[500px] overflow-auto\">\r\n    @for (message of messages; track message) {\r\n        <s-chat-message\r\n            #messageElements\r\n            [message]=\"message\"\r\n        >\r\n        </s-chat-message>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "component", type: ChatMessageComponent, selector: "s-chat-message", inputs: ["message"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-chat', standalone: true, imports: [ChatMessageComponent], template: "<div class=\"min-h-[500px] overflow-auto\">\r\n    @for (message of messages; track message) {\r\n        <s-chat-message\r\n            #messageElements\r\n            [message]=\"message\"\r\n        >\r\n        </s-chat-message>\r\n    }\r\n</div>\r\n" }]
        }], propDecorators: { messages: [{
                type: Input
            }], messageElements: [{
                type: ViewChildren,
                args: ['messageElements', { read: ElementRef }]
            }] } });

class ChatModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [i1.TranslateModule, ChatComponent], exports: [ChatComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [TranslateModule.forChild()] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [TranslateModule.forChild(), ChatComponent],
                    exports: [ChatComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ChatComponent, ChatModule };
//# sourceMappingURL=seniorsistemas-angular-components-chat.mjs.map
