<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->
<div 
    class="billing-page-wrapper scrolling" 
    #pageWrapper 
    [ngClass]="{'scroll': reportData?.length < 5}" 
    (scroll)="scrollTable($event)">
  <div class="wrapper" #wrapper>
    <div 
        class="nav-buttons" 
        [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} : 
          {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}"
        *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0 && reportData?.length">
      <div class="button-container" >
        <button 
            mat-mini-fab aria-label="Scroll left" 
            (click)="scrollTo('left')" 
            [ngClass]="{'not-allowed': tableWrapper.scrollLeft === 0 && reportData?.length}">
          <mat-icon [ngClass]="{'highlight': tableWrapper.scrollLeft !== 0 || pageWrapper.scrollLeft !== 0 && reportData?.length < 5}">
            keyboard_arrow_left
          </mat-icon>
        </button>
      </div>
      <div class="button-container" [ngClass]="{'not-allowed': this.checkMaxRight()}">
        <button mat-mini-fab aria-label="Scroll right"
                (click)="scrollTo('right')"
                [ngClass]="{'not-allowed': !(isMaxRight | async)}">
          <mat-icon [ngClass]="{'highlight': isMaxRight | async }">keyboard_arrow_right</mat-icon>
        </button>
      </div>
      <div class="totaL-item strong" >
        Total <span>{{fullReport.total_cost | localcurrency}}</span>
      </div>
    </div>

    <div class="nav-buttons"
        [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} : 
          {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}" 
        *ngIf="!(tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0) && reportData?.length">
      <div class="totaL-item strong" >
        Total <span>{{fullReport.total_cost | localcurrency}}</span>
      </div>
    </div>
    
    <section class="table-wrapper" id="scrolling" #tableWrapper (scroll)="scrollTable($event)" [ngStyle]="!reportData?.length && {'overflow': 'auto'}" [ngClass]="{'scroll': reportData?.length}">

      <table mat-table [dataSource]="reportData" class="data-grid reporting" #table>

        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef class="env_name label-header">
            <div class="label"><span class="text"> Resource name</span></div>
            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
                  <span *ngIf="filteredReportData.datalabId.length > 0; else datalabId_filtered">filter_list</span>
                  <ng-template #datalabId_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
            <td mat-cell *matCellDef="let element"><span class="table-item">{{element.datalabId}}</span></td>
          <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="user">
          <th mat-header-cell *matHeaderCellDef class="th_user label-header">

            <div class="label">
              <div class="sort sort-user">
                <div class="sort-arrow up" (click)="sortBy('user', 'down')" [ngClass]="{'active': !!this.active['userdown']}"></div>
                <div class="sort-arrow down" (click)="sortBy('user', 'up')" [ngClass]="{'active': !!this.active['userup']}"></div>
              </div>
              <span class="text"> User </span>
            </div>

            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
                <span *ngIf="filteredReportData.users.length > 0; else user_filtered">filter_list</span>
                <ng-template #user_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
          <td mat-cell *matCellDef=" let element">
            <div
              class="ellipsis user-name-cell"
              [ngStyle]="element.user?.length < 20 ? {'max-width' :'fit-content'} : {'max-width':'200px'}"
              [matTooltip]="element.user"
              matTooltipPosition="above"
              matTooltipClass="billing-user-name">
              {{element.user}}
            </div>
          </td>
          <td mat-footer-cell *matFooterCellDef  class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="project">
          <th mat-header-cell *matHeaderCellDef class="th_project label-header">

            <div class="label">
              <div class="sort sort-project">
                <div class="sort-arrow up" (click)="sortBy('project', 'down')" [ngClass]="{'active': !!this.active['projectdown']}"></div>
                <div class="sort-arrow down" (click)="sortBy('project', 'up')" [ngClass]="{'active': !!this.active['projectup']}"></div>
              </div>
              <span class="text">Project</span>
            </div>

            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
                <span *ngIf="filteredReportData.projects.length > 0; else project_filtered">filter_list</span>
                <ng-template #project_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
          <td mat-cell *matCellDef="let element"> {{element.project}} </td>
          <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef class="th_type label-header">
            <div class="label"><span class="text"> Resource Type</span> </div>
            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
                <span *ngIf="filteredReportData.resource_type.length > 0; else type_filtered">filter_list</span>
                <ng-template #type_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
          <td mat-cell *matCellDef="let element"> {{element.resource_type | titlecase}} </td>
          <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef class="th_status label-header">
            <div class="label"><span class="text"> Status</span> </div>
            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
                <span *ngIf="filteredReportData.statuses.length > 0; else status_filtered">filter_list</span>
                <ng-template #status_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
          <td mat-cell *matCellDef="let element">
        <span class="status" ngClass="{{ element.status.toLowerCase() || '' }}"
              *ngIf="element.status">{{ element.status.toLowerCase() }}</span>
            <span *ngIf="!element.status">N/A</span>
          </td>
          <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="shape">
          <th mat-header-cell *matHeaderCellDef class="th_shape label-header">
            <div class="label"><span class="text"> Instance size</span></div>
            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
            <span
              *ngIf="filteredReportData['shapes'].length > 0; else shape_filtered">filter_list</span>
                <ng-template #shape_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.shape">
              <div *ngFor="let shape of shapeSplit(element.shape)">{{shape}}</div>
            </ng-container>
          </td>
          <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="service">
          <th mat-header-cell *matHeaderCellDef class="service label-header">
            <div class="label"><span class="text"> Product</span> </div>
            <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
              <i class="material-icons">
            <span
              *ngIf="filteredReportData['products'].length > 0; else service_filtered">filter_list</span>
                <ng-template #service_filtered>more_vert</ng-template>
              </i>
            </button>
          </th>
          <td mat-cell *matCellDef="let element">
            {{ element.product }}
            <!--        <span *ngIf="element.product">{{ element.product }}</span>-->
          </td>
          <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
        </ng-container>

        <ng-container matColumnDef="empty">
          <th mat-header-cell *matHeaderCellDef class="th_empty label-header">
          </th>
          <td mat-cell *matCellDef="let element">
          </td>
          <td mat-footer-cell *matFooterCellDef class="table-footer total-cost" [colSpan]="2" [ngClass]="{'right-sticky': reportData?.length < 5}" [style]="{zIndex: 99999}">
<!--            <span class="strong">-->
<!--                Total <span *ngIf="reportData?.length">{{fullReport['total_cost'] | localcurrency}}</span>-->
<!--            </span>-->
          </td>
        </ng-container>


        <ng-container matColumnDef="charge" stickyEnd>
          <th mat-header-cell *matHeaderCellDef class="th_charges label-header index-105 charges-th" [ngClass]="{'right-sticky': reportData?.length < 5}">
            <div class="label">
              <div class="sort">
                <div class="sort-arrow up" (click)="sortBy('cost', 'down')" [ngClass]="{'active': !!this.active['costdown']}"></div>
                <div class="sort-arrow down" (click)="sortBy('cost', 'up')" [ngClass]="{'active': !!this.active['costup']}"></div>
              </div>
              <span class="text">Service Charges</span>
            </div>
          </th>

          <td mat-cell *matCellDef="let element" [ngClass]="{'right-sticky': reportData?.length < 5, 'charges-th': reportData?.length}" >
            {{element.cost | localcurrency }}
          </td >
          <td mat-footer-cell *matFooterCellDef class="table-footer total-cost d-none">
          </td>
        </ng-container>

        <!-- ----------------FILTER -->
        <ng-container matColumnDef="name-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <div class="input-wrapper">
                <input #nameFilter type="text" placeholder="Filter by environment name"
                       class="form-control filter-field"
                       [value]="filtered?.datalabId" (input)="onFilterNameUpdate($event.target['value'])"
                />
            </div>
          </th>
        </ng-container>
        <ng-container matColumnDef="user-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'users'"
                                   [items]="filterConfiguration.users" [model]="filteredReportData.users"></multi-select-dropdown>
          </th>
        </ng-container>
        <ng-container matColumnDef="project-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'projects'"
                                   [items]="filterConfiguration.projects" [model]="filteredReportData.projects"></multi-select-dropdown>
          </th>
        </ng-container>
        <ng-container matColumnDef="type-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resource_type'"
                                   [items]="filterConfiguration.resource_type" [model]="filteredReportData.resource_type">
            </multi-select-dropdown>
          </th>
        </ng-container>
        <ng-container matColumnDef="status-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'statuses'"
                                   [items]="filterConfiguration.statuses" [model]="filteredReportData.statuses"></multi-select-dropdown>
          </th>
        </ng-container>
        <ng-container matColumnDef="shape-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
                                   [type]="'shapes'" [items]="filterConfiguration['shapes']"
                                   [model]="filteredReportData['shapes']"></multi-select-dropdown>
          </th>
        </ng-container>

        <ng-container matColumnDef="empty-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
          </th>
        </ng-container>

        <ng-container matColumnDef="service-filter">
          <th mat-header-cell *matHeaderCellDef class="filter-row-item">
            <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)"
                                   [type]="['products']"
                                   [items]="filterConfiguration['products']"
                                   [model]="filteredReportData['products']"></multi-select-dropdown>
          </th>
        </ng-container>
        <ng-container matColumnDef="actions" stickyEnd>
          <th mat-header-cell *matHeaderCellDef class="filter-row-item index-105" [ngClass]="{'right-sticky': reportData?.length < 5}" [ngStyle]="{'zIndex': '101 !important'}">
            <div class="actions">
              <button mat-icon-button class="btn reset" (click)="resetFiltering(); isFiltered = !isFiltered" [disabled]="!isFilterSelected">
                <i class="material-icons">close</i>
              </button>

              <button mat-icon-button class="btn apply" (click)="filter_btnClick()" [disabled]="isFilterChanged">
                <i class="material-icons">done</i>
              </button>
            </div>
          </th>
        </ng-container>
        <ng-container matColumnDef="placeholder">
          <td mat-footer-cell *matFooterCellDef colspan="9" class="info">
            <span *ngIf="!isFilterSelected; else notFound">No data available</span>
            <ng-template #notFound>
              <span>No matches found</span>
            </ng-template>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>

        <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
            class="filter-row"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="content-row"></tr>

        <tr [hidden]="!reportData?.length" mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"
            class="header-row"></tr>
        <tr [hidden]="reportData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
      </table>
    </section>
  </div>
</div>