import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonIcon, IonButton, IonPopover, IonList, IonItem, IonLabel } from '@ionic/angular/standalone';
import { I18nService } from '../../../services/i18n';
import { AvatarComponent } from '../../atoms/avatar/avatar.component';
import { addIcons } from 'ionicons';
import { ellipsisHorizontal, checkmarkCircle, chatbubbleOutline, heartOutline, heart, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronDown, chevronUp, pin, pencil, trash, flag, share, } from 'ionicons/icons';
import * as i0 from "@angular/core";
addIcons({
    ellipsisHorizontal,
    checkmarkCircle,
    chatbubbleOutline,
    heartOutline,
    heart,
    thumbsUpOutline,
    thumbsUp,
    happyOutline,
    happy,
    sadOutline,
    sad,
    chevronDown,
    chevronUp,
    pin,
    pencil,
    trash,
    flag,
    share,
});
/**
 * val-comment
 *
 * A versatile comment component for forums, reviews, and social media.
 * Supports author info, reactions, actions, nested replies, and more.
 *
 * @example Basic comment
 * <val-comment [props]="{
 *   token: '1',
 *   author: { name: 'John Doe', username: 'johnd' },
 *   content: 'This is a great post!',
 *   timestamp: '2 hours ago'
 * }"></val-comment>
 *
 * @example With reactions and actions
 * <val-comment [props]="{
 *   token: '1',
 *   author: { name: 'Jane', avatar: avatarProps, verified: true },
 *   content: 'Amazing content! Check out https://example.com',
 *   timestamp: new Date(),
 *   reactions: [
 *     { token: 'like', icon: 'heart-outline', count: 42, active: false }
 *   ],
 *   actions: [
 *     { token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }
 *   ],
 *   menuItems: [
 *     { token: 'edit', label: 'Edit', icon: 'pencil' },
 *     { token: 'delete', label: 'Delete', icon: 'trash', color: 'danger' }
 *   ]
 * }"></val-comment>
 *
 * @input props: CommentMetadata - Configuration for the comment
 * @output authorClick - Emits when author name/avatar is clicked
 * @output reactionClick - Emits when a reaction is clicked
 * @output actionClick - Emits when an action button is clicked
 * @output menuItemClick - Emits when a menu item is clicked
 * @output loadMoreClick - Emits when load more replies is clicked
 * @output collapseToggle - Emits when comment is collapsed/expanded
 */
export class CommentComponent {
    constructor() {
        this.i18n = inject(I18nService);
        this.authorClick = new EventEmitter();
        this.reactionClick = new EventEmitter();
        this.actionClick = new EventEmitter();
        this.menuItemClick = new EventEmitter();
        this.loadMoreClick = new EventEmitter();
        this.collapseToggle = new EventEmitter();
        this.displayContent = '';
    }
    ngOnInit() {
        this.displayContent = this.props.content || this.props.contentFallback || '';
    }
    getInitials(name) {
        return name
            .split(' ')
            .map((n) => n[0])
            .join('')
            .substring(0, 2)
            .toUpperCase();
    }
    formatTimestamp(timestamp) {
        if (typeof timestamp === 'string') {
            return timestamp;
        }
        const now = new Date();
        const diff = now.getTime() - timestamp.getTime();
        const seconds = Math.floor(diff / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        const days = Math.floor(hours / 24);
        if (seconds < 60)
            return this.i18n.t('justNow');
        if (minutes < 60)
            return this.i18n.t('minutesAgo', '_global', { minutes: minutes.toString() });
        if (hours < 24)
            return this.i18n.t('hoursAgo', '_global', { hours: hours.toString() });
        if (days < 7)
            return this.i18n.t('daysAgo', '_global', { days: days.toString() });
        return timestamp.toLocaleDateString();
    }
    getLoadMoreRepliesText() {
        const count = this.getRemainingCount();
        return this.i18n.t('loadMoreReplies') + ` (${count})`;
    }
    getViewRepliesText() {
        const count = this.props.replyCount || this.props.children?.length || 0;
        return this.i18n.t('viewReplies') + ` (${count})`;
    }
    formatCount(count) {
        if (count >= 1000000) {
            return (count / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
        }
        if (count >= 1000) {
            return (count / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
        }
        return count.toString();
    }
    processContent(content) {
        if (this.props.autoLinkify === false) {
            return this.escapeHtml(content);
        }
        // Escape HTML first
        let processed = this.escapeHtml(content);
        // URL regex
        const urlRegex = /(https?:\/\/[^\s<]+[^\s<.,;:!?)\]'"])/gi;
        processed = processed.replace(urlRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="comment-link">$1</a>');
        // @mentions
        const mentionRegex = /@(\w+)/g;
        processed = processed.replace(mentionRegex, '<span class="comment-mention">@$1</span>');
        // #hashtags
        const hashtagRegex = /#(\w+)/g;
        processed = processed.replace(hashtagRegex, '<span class="comment-hashtag">#$1</span>');
        // Preserve line breaks
        processed = processed.replace(/\n/g, '<br>');
        return processed;
    }
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    getReactionColor(reaction) {
        if (reaction.active && reaction.activeColor) {
            return `var(--ion-color-${reaction.activeColor})`;
        }
        if (reaction.active) {
            return 'var(--ion-color-primary)';
        }
        if (reaction.color) {
            return `var(--ion-color-${reaction.color})`;
        }
        return 'var(--ion-color-medium)';
    }
    getActionLabel(action) {
        return action.label || action.contentFallback || '';
    }
    getMenuItemLabel(item) {
        return item.label || item.contentFallback || '';
    }
    hasChildren() {
        return !!(this.props.children && this.props.children.length > 0) ||
            !!(this.props.replyCount && this.props.replyCount > 0);
    }
    canShowChildren() {
        const maxDepth = this.props.maxDepth ?? 3;
        const currentDepth = this.props.depth ?? 0;
        return currentDepth < maxDepth && !!(this.props.children && this.props.children.length > 0);
    }
    getChildProps(child) {
        return {
            ...child,
            depth: (this.props.depth ?? 0) + 1,
            maxDepth: this.props.maxDepth ?? 3,
        };
    }
    hasMoreReplies() {
        if (!this.props.replyCount)
            return false;
        const loadedCount = this.props.children?.length ?? 0;
        return this.props.replyCount > loadedCount;
    }
    getRemainingCount() {
        const total = this.props.replyCount ?? 0;
        const loaded = this.props.children?.length ?? 0;
        return total - loaded;
    }
    onAuthorClick() {
        this.authorClick.emit({
            author: this.props.author,
            commentToken: this.props.token,
        });
    }
    onReactionClick(reaction) {
        this.reactionClick.emit({
            reaction,
            commentToken: this.props.token,
            isActive: !reaction.active,
        });
    }
    onActionClick(action) {
        this.actionClick.emit({
            action,
            commentToken: this.props.token,
        });
    }
    onMenuItemClick(item) {
        this.menuItemClick.emit({
            menuItem: item,
            commentToken: this.props.token,
        });
    }
    onLoadMoreClick() {
        this.loadMoreClick.emit({
            commentToken: this.props.token,
            currentCount: this.props.children?.length ?? 0,
        });
    }
    onToggleCollapse() {
        this.collapseToggle.emit({
            token: this.props.token,
            collapsed: !this.props.collapsed,
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CommentComponent, isStandalone: true, selector: "val-comment", inputs: { props: "props" }, outputs: { authorClick: "authorClick", reactionClick: "reactionClick", actionClick: "actionClick", menuItemClick: "menuItemClick", loadMoreClick: "loadMoreClick", collapseToggle: "collapseToggle" }, ngImport: i0, template: `
    <div
      class="comment"
      [class.highlighted]="props.highlighted"
      [class.pinned]="props.pinned"
      [class.collapsed]="props.collapsed"
      [style.--depth]="props.depth || 0"
    >
      @if (props.pinned) {
        <div class="pinned-indicator">
          <ion-icon name="pin"></ion-icon>
          <span>{{ i18n.t('pinned') }}</span>
        </div>
      }

      <div class="comment-main">
        <div class="comment-avatar" (click)="onAuthorClick()">
          @if (props.author.avatar) {
            <val-avatar [props]="props.author.avatar"></val-avatar>
          } @else {
            <div class="avatar-placeholder">
              {{ getInitials(props.author.name) }}
            </div>
          }
        </div>

        <div class="comment-body">
          <div class="comment-header">
            <div class="author-info" (click)="onAuthorClick()">
              <span class="author-name">{{ props.author.name }}</span>
              @if (props.author.verified) {
                <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
              }
              @if (props.author.username) {
                <span class="author-username">&#64;{{ props.author.username }}</span>
              }
            </div>

            <div class="comment-meta">
              <span class="timestamp">{{ formatTimestamp(props.timestamp) }}</span>
              @if (props.edited) {
                <span class="edited-label">{{ i18n.t('edited') }}</span>
              }
            </div>

            @if (props.menuItems && props.menuItems.length > 0) {
              <ion-button
                fill="clear"
                size="small"
                class="more-button"
                [id]="'menu-trigger-' + props.token"
              >
                <ion-icon name="ellipsis-horizontal" slot="icon-only"></ion-icon>
              </ion-button>

              <ion-popover
                [trigger]="'menu-trigger-' + props.token"
                [dismissOnSelect]="true"
              >
                <ng-template>
                  <ion-list>
                    @for (item of props.menuItems; track item.token) {
                      @if (item.dividerBefore) {
                        <div class="menu-divider"></div>
                      }
                      <ion-item
                        [button]="true"
                        [detail]="false"
                        [disabled]="item.disabled"
                        (click)="onMenuItemClick(item)"
                      >
                        @if (item.icon) {
                          <ion-icon
                            [name]="item.icon"
                            slot="start"
                            [color]="item.color"
                          ></ion-icon>
                        }
                        <ion-label [color]="item.color">
                          {{ getMenuItemLabel(item) }}
                        </ion-label>
                      </ion-item>
                    }
                  </ion-list>
                </ng-template>
              </ion-popover>
            }
          </div>

          @if (!props.collapsed) {
            <div
              class="comment-content"
              [innerHTML]="processContent(displayContent)"
            ></div>

            @if (props.reactions && props.reactions.length > 0) {
              <div class="comment-reactions">
                @for (reaction of props.reactions; track reaction.token) {
                  <button
                    class="reaction-button"
                    [class.active]="reaction.active"
                    [style.--reaction-color]="getReactionColor(reaction)"
                    (click)="onReactionClick(reaction)"
                  >
                    <ion-icon [name]="reaction.icon"></ion-icon>
                    @if (reaction.count > 0) {
                      <span class="reaction-count">{{ formatCount(reaction.count) }}</span>
                    }
                  </button>
                }
              </div>
            }

            @if (props.actions && props.actions.length > 0) {
              <div class="comment-actions">
                @for (action of props.actions; track action.token) {
                  <ion-button
                    fill="clear"
                    size="small"
                    [color]="action.color || 'medium'"
                    [disabled]="action.disabled"
                    (click)="onActionClick(action)"
                  >
                    @if (action.icon) {
                      <ion-icon [name]="action.icon" slot="start"></ion-icon>
                    }
                    {{ getActionLabel(action) }}
                  </ion-button>
                }
              </div>
            }
          } @else {
            <button class="expand-button" (click)="onToggleCollapse()">
              <ion-icon name="chevron-down"></ion-icon>
              <span>{{ i18n.t('showComment') }}</span>
            </button>
          }
        </div>
      </div>

      @if (!props.collapsed && hasChildren()) {
        <div class="comment-children">
          @if (props.collapsed) {
            <button class="collapse-button" (click)="onToggleCollapse()">
              <ion-icon name="chevron-up"></ion-icon>
              <span>{{ i18n.t('hideReplies') }}</span>
            </button>
          }

          @if (canShowChildren()) {
            @for (child of props.children; track child.token) {
              <val-comment
                [props]="getChildProps(child)"
                (authorClick)="authorClick.emit($event)"
                (reactionClick)="reactionClick.emit($event)"
                (actionClick)="actionClick.emit($event)"
                (menuItemClick)="menuItemClick.emit($event)"
                (loadMoreClick)="loadMoreClick.emit($event)"
                (collapseToggle)="collapseToggle.emit($event)"
              ></val-comment>
            }

            @if (hasMoreReplies()) {
              <button class="load-more-button" (click)="onLoadMoreClick()">
                <ion-icon name="chatbubble-outline"></ion-icon>
                <span>{{ getLoadMoreRepliesText() }}</span>
              </button>
            }
          } @else {
            <button class="view-replies-button" (click)="onLoadMoreClick()">
              <ion-icon name="chatbubble-outline"></ion-icon>
              <span>{{ getViewRepliesText() }}</span>
            </button>
          }
        </div>
      }
    </div>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.comment{--indent-size: 24px;--max-indent: 72px;padding:12px 0}.comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.08);border-radius:8px;padding:12px;margin:-4px}.comment.pinned{border-left:3px solid var(--ion-color-primary);padding-left:12px}.comment.collapsed{opacity:.7}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:44px}.pinned-indicator ion-icon{font-size:.875rem}.comment-main{display:flex;gap:12px}.comment-avatar{flex-shrink:0;cursor:pointer}.comment-avatar val-avatar{--size: 36px}.comment-avatar .avatar-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ion-color-primary),var(--ion-color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.comment-body{flex:1;min-width:0}.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}.author-info{display:flex;align-items:center;gap:4px;cursor:pointer}.author-info:hover .author-name{text-decoration:underline}.author-name{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.verified-badge{color:var(--ion-color-primary);font-size:1rem}.author-username{font-size:.8125rem;color:var(--ion-color-medium)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-medium)}.edited-label{font-size:.6875rem;color:var(--ion-color-medium);font-style:italic}.more-button{--padding-start: 4px;--padding-end: 4px;margin:0;height:28px}.more-button ion-icon{font-size:1.125rem;color:var(--ion-color-medium)}.menu-divider{height:1px;background-color:var(--ion-color-light);margin:4px 0}.comment-content{font-size:.875rem;line-height:1.5;color:var(--ion-text-color);word-wrap:break-word;overflow-wrap:break-word}.comment-content :global(.comment-link){color:var(--ion-color-primary);text-decoration:none}.comment-content :global(.comment-link):hover{text-decoration:underline}.comment-content :global(.comment-mention){color:var(--ion-color-primary);font-weight:500;cursor:pointer}.comment-content :global(.comment-mention):hover{text-decoration:underline}.comment-content :global(.comment-hashtag){color:var(--ion-color-primary);cursor:pointer}.comment-content :global(.comment-hashtag):hover{text-decoration:underline}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reaction-button{display:flex;align-items:center;gap:4px;background:none;border:none;padding:4px 8px;border-radius:16px;cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:all .2s ease;background-color:transparent}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.1)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.125rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:500}.comment-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-left:-8px}.comment-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8125rem;height:32px;text-transform:none;font-weight:500}.expand-button,.collapse-button,.load-more-button,.view-replies-button{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);border-radius:8px;transition:background-color .2s}.expand-button:hover,.collapse-button:hover,.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon,.load-more-button ion-icon,.view-replies-button ion-icon{font-size:1rem}.expand-button{margin-top:4px;color:var(--ion-color-medium)}.comment-children{margin-top:12px;padding-left:min(var(--indent-size),var(--max-indent));border-left:2px solid var(--ion-color-light-shade)}.comment-children val-comment{display:block}.comment-children val-comment:first-of-type .comment{padding-top:0}.load-more-button,.view-replies-button{margin-top:8px;margin-left:0}ion-popover{--width: 200px}ion-popover ion-list{padding:4px 0}ion-popover ion-item{--min-height: 40px;--padding-start: 12px;font-size:.875rem}ion-popover ion-item ion-icon{font-size:1.125rem;margin-right:8px}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 2px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 2px);height:max(28px,36px - 2px);font-size:max(.6875rem,.8125rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 4px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 4px);height:max(28px,36px - 4px);font-size:max(.6875rem,.75rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 6px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 6px);height:max(28px,36px - 6px);font-size:max(.6875rem,.6875rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 8px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 8px);height:max(28px,36px - 8px);font-size:max(.6875rem,.625rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 10px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 10px);height:max(28px,36px - 10px);font-size:max(.6875rem,.5625rem)}:host-context(.dark) .comment.highlighted,:host-context(.ion-palette-dark) .comment.highlighted,:host-context(html.ion-palette-dark) .comment.highlighted,:host-context(body.dark) .comment.highlighted,:host-context([data-theme=dark]) .comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.12)}:host-context(.dark) .avatar-placeholder,:host-context(.ion-palette-dark) .avatar-placeholder,:host-context(html.ion-palette-dark) .avatar-placeholder,:host-context(body.dark) .avatar-placeholder,:host-context([data-theme=dark]) .avatar-placeholder{background:linear-gradient(135deg,var(--ion-color-primary-shade),var(--ion-color-secondary-shade))}\n"], dependencies: [{ kind: "component", type: CommentComponent, selector: "val-comment", inputs: ["props"], outputs: ["authorClick", "reactionClick", "actionClick", "menuItemClick", "loadMoreClick", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-comment', standalone: true, imports: [
                        CommonModule,
                        IonIcon,
                        IonButton,
                        IonPopover,
                        IonList,
                        IonItem,
                        IonLabel,
                        AvatarComponent,
                    ], template: `
    <div
      class="comment"
      [class.highlighted]="props.highlighted"
      [class.pinned]="props.pinned"
      [class.collapsed]="props.collapsed"
      [style.--depth]="props.depth || 0"
    >
      @if (props.pinned) {
        <div class="pinned-indicator">
          <ion-icon name="pin"></ion-icon>
          <span>{{ i18n.t('pinned') }}</span>
        </div>
      }

      <div class="comment-main">
        <div class="comment-avatar" (click)="onAuthorClick()">
          @if (props.author.avatar) {
            <val-avatar [props]="props.author.avatar"></val-avatar>
          } @else {
            <div class="avatar-placeholder">
              {{ getInitials(props.author.name) }}
            </div>
          }
        </div>

        <div class="comment-body">
          <div class="comment-header">
            <div class="author-info" (click)="onAuthorClick()">
              <span class="author-name">{{ props.author.name }}</span>
              @if (props.author.verified) {
                <ion-icon name="checkmark-circle" class="verified-badge"></ion-icon>
              }
              @if (props.author.username) {
                <span class="author-username">&#64;{{ props.author.username }}</span>
              }
            </div>

            <div class="comment-meta">
              <span class="timestamp">{{ formatTimestamp(props.timestamp) }}</span>
              @if (props.edited) {
                <span class="edited-label">{{ i18n.t('edited') }}</span>
              }
            </div>

            @if (props.menuItems && props.menuItems.length > 0) {
              <ion-button
                fill="clear"
                size="small"
                class="more-button"
                [id]="'menu-trigger-' + props.token"
              >
                <ion-icon name="ellipsis-horizontal" slot="icon-only"></ion-icon>
              </ion-button>

              <ion-popover
                [trigger]="'menu-trigger-' + props.token"
                [dismissOnSelect]="true"
              >
                <ng-template>
                  <ion-list>
                    @for (item of props.menuItems; track item.token) {
                      @if (item.dividerBefore) {
                        <div class="menu-divider"></div>
                      }
                      <ion-item
                        [button]="true"
                        [detail]="false"
                        [disabled]="item.disabled"
                        (click)="onMenuItemClick(item)"
                      >
                        @if (item.icon) {
                          <ion-icon
                            [name]="item.icon"
                            slot="start"
                            [color]="item.color"
                          ></ion-icon>
                        }
                        <ion-label [color]="item.color">
                          {{ getMenuItemLabel(item) }}
                        </ion-label>
                      </ion-item>
                    }
                  </ion-list>
                </ng-template>
              </ion-popover>
            }
          </div>

          @if (!props.collapsed) {
            <div
              class="comment-content"
              [innerHTML]="processContent(displayContent)"
            ></div>

            @if (props.reactions && props.reactions.length > 0) {
              <div class="comment-reactions">
                @for (reaction of props.reactions; track reaction.token) {
                  <button
                    class="reaction-button"
                    [class.active]="reaction.active"
                    [style.--reaction-color]="getReactionColor(reaction)"
                    (click)="onReactionClick(reaction)"
                  >
                    <ion-icon [name]="reaction.icon"></ion-icon>
                    @if (reaction.count > 0) {
                      <span class="reaction-count">{{ formatCount(reaction.count) }}</span>
                    }
                  </button>
                }
              </div>
            }

            @if (props.actions && props.actions.length > 0) {
              <div class="comment-actions">
                @for (action of props.actions; track action.token) {
                  <ion-button
                    fill="clear"
                    size="small"
                    [color]="action.color || 'medium'"
                    [disabled]="action.disabled"
                    (click)="onActionClick(action)"
                  >
                    @if (action.icon) {
                      <ion-icon [name]="action.icon" slot="start"></ion-icon>
                    }
                    {{ getActionLabel(action) }}
                  </ion-button>
                }
              </div>
            }
          } @else {
            <button class="expand-button" (click)="onToggleCollapse()">
              <ion-icon name="chevron-down"></ion-icon>
              <span>{{ i18n.t('showComment') }}</span>
            </button>
          }
        </div>
      </div>

      @if (!props.collapsed && hasChildren()) {
        <div class="comment-children">
          @if (props.collapsed) {
            <button class="collapse-button" (click)="onToggleCollapse()">
              <ion-icon name="chevron-up"></ion-icon>
              <span>{{ i18n.t('hideReplies') }}</span>
            </button>
          }

          @if (canShowChildren()) {
            @for (child of props.children; track child.token) {
              <val-comment
                [props]="getChildProps(child)"
                (authorClick)="authorClick.emit($event)"
                (reactionClick)="reactionClick.emit($event)"
                (actionClick)="actionClick.emit($event)"
                (menuItemClick)="menuItemClick.emit($event)"
                (loadMoreClick)="loadMoreClick.emit($event)"
                (collapseToggle)="collapseToggle.emit($event)"
              ></val-comment>
            }

            @if (hasMoreReplies()) {
              <button class="load-more-button" (click)="onLoadMoreClick()">
                <ion-icon name="chatbubble-outline"></ion-icon>
                <span>{{ getLoadMoreRepliesText() }}</span>
              </button>
            }
          } @else {
            <button class="view-replies-button" (click)="onLoadMoreClick()">
              <ion-icon name="chatbubble-outline"></ion-icon>
              <span>{{ getViewRepliesText() }}</span>
            </button>
          }
        </div>
      }
    </div>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{display:block}.comment{--indent-size: 24px;--max-indent: 72px;padding:12px 0}.comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.08);border-radius:8px;padding:12px;margin:-4px}.comment.pinned{border-left:3px solid var(--ion-color-primary);padding-left:12px}.comment.collapsed{opacity:.7}.pinned-indicator{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--ion-color-primary);margin-bottom:8px;padding-left:44px}.pinned-indicator ion-icon{font-size:.875rem}.comment-main{display:flex;gap:12px}.comment-avatar{flex-shrink:0;cursor:pointer}.comment-avatar val-avatar{--size: 36px}.comment-avatar .avatar-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ion-color-primary),var(--ion-color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.comment-body{flex:1;min-width:0}.comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}.author-info{display:flex;align-items:center;gap:4px;cursor:pointer}.author-info:hover .author-name{text-decoration:underline}.author-name{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.verified-badge{color:var(--ion-color-primary);font-size:1rem}.author-username{font-size:.8125rem;color:var(--ion-color-medium)}.comment-meta{display:flex;align-items:center;gap:6px;margin-left:auto}.timestamp{font-size:.75rem;color:var(--ion-color-medium)}.edited-label{font-size:.6875rem;color:var(--ion-color-medium);font-style:italic}.more-button{--padding-start: 4px;--padding-end: 4px;margin:0;height:28px}.more-button ion-icon{font-size:1.125rem;color:var(--ion-color-medium)}.menu-divider{height:1px;background-color:var(--ion-color-light);margin:4px 0}.comment-content{font-size:.875rem;line-height:1.5;color:var(--ion-text-color);word-wrap:break-word;overflow-wrap:break-word}.comment-content :global(.comment-link){color:var(--ion-color-primary);text-decoration:none}.comment-content :global(.comment-link):hover{text-decoration:underline}.comment-content :global(.comment-mention){color:var(--ion-color-primary);font-weight:500;cursor:pointer}.comment-content :global(.comment-mention):hover{text-decoration:underline}.comment-content :global(.comment-hashtag){color:var(--ion-color-primary);cursor:pointer}.comment-content :global(.comment-hashtag):hover{text-decoration:underline}.comment-reactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reaction-button{display:flex;align-items:center;gap:4px;background:none;border:none;padding:4px 8px;border-radius:16px;cursor:pointer;font-size:.8125rem;color:var(--reaction-color, var(--ion-color-medium));transition:all .2s ease;background-color:transparent}.reaction-button:hover{background-color:rgba(var(--ion-color-medium-rgb),.1)}.reaction-button.active{background-color:rgba(var(--ion-color-primary-rgb),.1)}.reaction-button.active ion-icon{transform:scale(1.1)}.reaction-button ion-icon{font-size:1.125rem;transition:transform .2s ease}.reaction-button .reaction-count{font-weight:500}.comment-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;margin-left:-8px}.comment-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8125rem;height:32px;text-transform:none;font-weight:500}.expand-button,.collapse-button,.load-more-button,.view-replies-button{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);border-radius:8px;transition:background-color .2s}.expand-button:hover,.collapse-button:hover,.load-more-button:hover,.view-replies-button:hover{background-color:rgba(var(--ion-color-primary-rgb),.1)}.expand-button ion-icon,.collapse-button ion-icon,.load-more-button ion-icon,.view-replies-button ion-icon{font-size:1rem}.expand-button{margin-top:4px;color:var(--ion-color-medium)}.comment-children{margin-top:12px;padding-left:min(var(--indent-size),var(--max-indent));border-left:2px solid var(--ion-color-light-shade)}.comment-children val-comment{display:block}.comment-children val-comment:first-of-type .comment{padding-top:0}.load-more-button,.view-replies-button{margin-top:8px;margin-left:0}ion-popover{--width: 200px}ion-popover ion-list{padding:4px 0}ion-popover ion-item{--min-height: 40px;--padding-start: 12px;font-size:.875rem}ion-popover ion-item ion-icon{font-size:1.125rem;margin-right:8px}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 2px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 2px);height:max(28px,36px - 2px);font-size:max(.6875rem,.8125rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 4px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 4px);height:max(28px,36px - 4px);font-size:max(.6875rem,.75rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 6px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 6px);height:max(28px,36px - 6px);font-size:max(.6875rem,.6875rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 8px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 8px);height:max(28px,36px - 8px);font-size:max(.6875rem,.625rem)}:host-context(val-comment) .comment-avatar val-avatar{--size: max(28px, 36px - 10px)}:host-context(val-comment) .comment-avatar .avatar-placeholder{width:max(28px,36px - 10px);height:max(28px,36px - 10px);font-size:max(.6875rem,.5625rem)}:host-context(.dark) .comment.highlighted,:host-context(.ion-palette-dark) .comment.highlighted,:host-context(html.ion-palette-dark) .comment.highlighted,:host-context(body.dark) .comment.highlighted,:host-context([data-theme=dark]) .comment.highlighted{background-color:rgba(var(--ion-color-primary-rgb),.12)}:host-context(.dark) .avatar-placeholder,:host-context(.ion-palette-dark) .avatar-placeholder,:host-context(html.ion-palette-dark) .avatar-placeholder,:host-context(body.dark) .avatar-placeholder,:host-context([data-theme=dark]) .avatar-placeholder{background:linear-gradient(135deg,var(--ion-color-primary-shade),var(--ion-color-secondary-shade))}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], authorClick: [{
                type: Output
            }], reactionClick: [{
                type: Output
            }], actionClick: [{
                type: Output
            }], menuItemClick: [{
                type: Output
            }], loadMoreClick: [{
                type: Output
            }], collapseToggle: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 