<cdk-virtual-scroll-viewport
  #cvsvGroup
  itemSize="60"
  perfectScrollbar
  fxFlexFill
>
  <ng-container
    *cdkVirtualFor="let node of dataSource.expandedData$"
  ></ng-container>
  <mat-tree
    #groupTree
    [dataSource]="dataSource"
    [treeControl]="treeControl"
    class="group-tree"
  >
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node"
      [attr.node-type]="node?.nodeType"
      matRipple
    >
      <li>
        <div class="mat-tree-node">
          <ng-container
            [ngTemplateOutlet]="expansionPanelItemTemplateRef"
            [ngTemplateOutletContext]="{
              $implicit: node?.userInfo,
              group: node?.groupDetail
            }"
          >
          </ng-container>
        </div>
      </li>
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node; when: isHeader"
      class="tree-node-frame ucap-clickable"
      [attr.node-type]="node?.nodeType"
      matRipple
    >
      <li class="tree-node-header" matTreeNodeToggle>
        <div class="path">
          <button
            mat-icon-button
            [attr.aria-label]="'toggle '"
            class="btn-toggle"
          >
            <mat-icon class="mat-icon-rtl-mirror">
              {{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
            </mat-icon>
          </button>
          <div class="group-info">
            <ng-container [ngSwitch]="node.nodeType">
              <span *ngSwitchCase="NodeType.Profile" class="group-name">
                <span class="title-name ellipsis">{{
                  'profile.my' | translate
                }}</span>
                <span class="text-accent-color number">
                  ({{ node.countOfChildren
                  }}{{ 'common.units.persons' | translate }})</span
                >
              </span>

              <span *ngSwitchCase="NodeType.Favorit" class="group-name">
                <span class="title-name ellipsis">{{
                  'group.nameFavorite' | translate
                }}</span>
                <span class="text-accent-color number">
                  ({{ node.countOfChildren
                  }}{{ 'common.units.persons' | translate }})</span
                >
              </span>

              <span *ngSwitchCase="NodeType.Default" class="group-name">
                <span class="title-name ellipsis">{{
                  'group.nameDefault' | translate
                }}</span>
                <span class="text-accent-color number">
                  ({{ node.countOfChildren
                  }}{{ 'common.units.persons' | translate }})</span
                >
              </span>

              <span *ngSwitchCase="NodeType.MyDept" class="group-name">
                <span class="title-name ellipsis">{{
                  'group.nameMyDept' | translate
                }}</span>
                <span class="text-accent-color number">
                  ({{ node.countOfChildren
                  }}{{ 'common.units.persons' | translate }})</span
                >
              </span>

              <span *ngSwitchCase="NodeType.Buddy" class="group-name">
                <span class="title-name ellipsis">{{
                  node.groupDetail.name
                }}</span>
                <span class="text-accent-color number">
                  ({{ node.countOfChildren
                  }}{{ 'common.units.persons' | translate }})</span
                >
              </span>
            </ng-container>
          </div>
          <!-- switch안으로 이동
          <span class="text-accent-color number">
            ({{ node.countOfChildren
            }}{{ 'common.units.persons' | translate }})</span
          >-->

          <mat-checkbox
            *ngIf="checkable"
            #checkbox
            [checked]="getCheckedGroup(node.groupDetail)"
            [disabled]="!getCheckableGroup(node.groupDetail)"
            (change)="onChangeCheck(checkbox.checked, node.groupDetail)"
            (click)="$event.stopPropagation()"
            class="group-check"
          >
          </mat-checkbox>
          <button
            mat-icon-button
            aria-label="group menu"
            *ngIf="node.nodeType !== NodeType.Profile && !checkable"
            (click)="onClickMore($event, node.groupDetail)"
            class="group-menu"
          >
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
        <ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
          <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
            <div class="vertical-line"></div>
            <ng-container matTreeNodeOutlet></ng-container>
          </div>
        </ul>
      </li>
    </mat-tree-node>
  </mat-tree>
</cdk-virtual-scroll-viewport>
