<div class="expansion-container">
  <ucap-group-expansion
    #groupExpansion
    [displayOrder]="displayOrder"
    [profile]="!isDialog ? loginRes?.userInfo : null"
    [favorites]="showType === 'ALL' ? favorites : null"
    [groupBuddies]="getBuddiesForShowType()"
    [selectedUserList]="selectedUserList"
    [checkable]="checkable"
    (clickMoreMenu)="!isDialog ? onClickMoreMenu($event) : null"
    (checkGroup)="onToggleCheckGroup($event)"
  >
    <ng-template ucapGroupExpansionNode let-node>
      <app-group-profile-list-item-02
        [userInfo]="node.userInfo"
        [checkable]="checkable"
        [isDialog]="isDialog"
        [checked]="getCheckedUser(node.userInfo)"
        [isMe]="loginRes?.userSeq === node.userInfo.seq"
        (moreMenu)="onClikeMoreProfile($event)"
        (changeCheckUser)="onChangeCheckUser($event)"
      ></app-group-profile-list-item-02>
    </ng-template>

    <ng-template ucapGroupExpansionFavoriteHeader let-node>
      <span class="header-favorite">
        <span>
          {{ 'category.favorite' | ucapI18n }}
        </span>
        <span>({{ node.children?.length }})</span>
      </span>
    </ng-template>
    <ng-template ucapGroupExpansionBuddyHeader let-node>
      <span class="header-buddy">
        <span>{{ node.groupDetail.name }}</span>
        <span> ({{ node.children?.length }}) </span>
      </span>
    </ng-template>
    <ng-template ucapGroupExpansionDefaultHeader let-node>
      <span class="header-default">
        <span>
          {{ 'category.default' | ucapI18n }}
        </span>
        <span>({{ node.children?.length }})</span>
      </span>
    </ng-template>
  </ucap-group-expansion>
</div>

<div
  style="visibility: hidden; position: fixed;"
  [style.left]="groupContextMenuPosition.x"
  [style.top]="groupContextMenuPosition.y"
  #groupContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="groupMenu"
></div>

<mat-menu #groupMenu="matMenu">
  <ng-template matMenuContent let-group="group">
    <span class="manu-title">{{ group.name }}</span>
    <button mat-menu-item style="display: none;"></button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('CHAT', group)"
      (click)="onSelectGroupMenu('CHAT', group)"
    >
      {{ 'moreMenu.group.startChatWithGroup' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('SEND_MESSAGE', group)"
      (click)="onSelectGroupMenu('SEND_MESSAGE', group)"
    >
      {{ 'moreMenu.group.sendMessageToGroup' | ucapI18n }}
    </button>
    <mat-divider *ngIf="getShowGroupContextMenu('DIV1', group)"></mat-divider>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('RENAME', group)"
      (click)="onSelectGroupMenu('RENAME', group)"
    >
      {{ 'moreMenu.group.changeGroupName' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('MANAGE_MEMBER', group)"
      (click)="onSelectGroupMenu('MANAGE_MEMBER', group)"
    >
      {{ 'moreMenu.group.groupMemberManagement' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowGroupContextMenu('DELETE', group)"
      (click)="onSelectGroupMenu('DELETE', group)"
    >
      {{ 'moreMenu.group.removeGroup' | ucapI18n }}
    </button>
  </ng-template>
</mat-menu>

<div
  style="visibility: hidden; position: fixed;"
  [style.left]="profileContextMenuPosition.x"
  [style.top]="profileContextMenuPosition.y"
  #profileContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="profileContextMenu"
></div>
<mat-menu #profileContextMenu="matMenu" (closed)="onProfileMenuClose($event)">
  <ng-template
    matMenuContent
    let-userInfo="userInfo"
    let-group="group"
    let-rect="rect"
  >
    <button
      mat-menu-item
      (click)="
        onClickProfileContextMenu($event, 'VIEW_PROFILE', userInfo, group, rect)
      "
    >
      {{ 'moreMenu.profile.open' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowProfileContextMenu('REGISTER_FAVORITE', group)"
      (click)="
        onClickProfileContextMenu(
          $event,
          'REGISTER_FAVORITE',
          userInfo,
          group,
          rect
        )
      "
    >
      <!-- {{
        (userInfo.isFavorit ? 'group.unfavorite' : 'group.favorite') | ucapI18n
      }} -->
      {{ 'moreMenu.profile.favorite' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      (click)="
        onClickProfileContextMenu($event, 'NICKNAME', userInfo, group, rect)
      "
    >
      {{ 'moreMenu.profile.nickname' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowProfileContextMenu('COPY_BUDDY', group)"
      (click)="
        onClickProfileContextMenu($event, 'COPY_BUDDY', userInfo, group, rect)
      "
    >
      {{ 'moreMenu.profile.copyBuddy' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowProfileContextMenu('MOVE_BUDDY', group)"
      (click)="
        onClickProfileContextMenu($event, 'MOVE_BUDDY', userInfo, group, rect)
      "
    >
      {{ 'moreMenu.profile.moveBuddy' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowProfileContextMenu('REMOVE_BUDDY', group)"
      (click)="
        onClickProfileContextMenu($event, 'REMOVE_BUDDY', userInfo, group, rect)
      "
    >
      {{ 'moreMenu.profile.removeBuddy' | ucapI18n }}
    </button>
  </ng-template>
</mat-menu>
