import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { sharedGridLayout } from './utils/sharedLayOut';
import * as i0 from "@angular/core";
import * as i1 from "./reports.service";
import * as i2 from "@angular/material/tabs";
import * as i3 from "@angular/material/grid-list";
import * as i4 from "@angular/material/card";
import * as i5 from "@angular/material/button";
import * as i6 from "@angular/common";
export class ReportsComponent {
    constructor(reportService) {
        this.reportService = reportService;
        this.reportsGroups = [];
        this.reportsByGroupId = [];
        this.$subs = [];
        this.onViewClicked = new EventEmitter();
        this.breakpoint = 3;
    }
    ngOnInit() {
        this.loadGroups();
    }
    loadGroups() {
        const sub1 = this.reportService
            .loadGroups(this.urlReportGroups)
            .subscribe((res) => {
            this.reportsGroups = res;
            this.$subs.push(sub1);
        });
    }
    listReportsByGroupId(groupId) {
        const sub2 = this.reportService
            .listReportsByGroupId(this.reportGroupByIdUrl, groupId)
            .subscribe((res2) => {
            this.reportsByGroupId = res2;
        });
        this.$subs.push(sub2);
    }
    onTabChanged(event) {
        this.listReportsByGroupId(this.reportsGroups[event].id);
    }
    viewReportFilterDetails(report) {
        this.onViewClicked.emit(report);
    }
    onResize(event) {
        this.breakpoint = sharedGridLayout(true, event);
        console.log('breakPoint', this.breakpoint);
    }
    ngOnDestroy() {
        this.$subs.forEach((item) => item.unsubscribe());
    }
}
ReportsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReportsComponent, deps: [{ token: i1.ReportsService }], target: i0.ɵɵFactoryTarget.Component });
ReportsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ReportsComponent, selector: "lib-reports-groups", inputs: { urlReportGroups: "urlReportGroups", reportGroupByIdUrl: "reportGroupByIdUrl" }, outputs: { onViewClicked: "onViewClicked" }, ngImport: i0, template: `
    <div class="reportsContainer">
      <div class="title">
        Marketing Reports
      </div>
        <mat-tab-group *ngIf="reportsGroups" (selectedIndexChange)="onTabChanged($event)">
          <mat-tab  [id]="group.id" *ngFor="let group of reportsGroups;let i=index"
                    label="{{group.name}}" >
          <mat-grid-list  class="space" [cols]="breakpoint" (window:resize)="onResize($event)" rowHeight="200px">
            <mat-grid-tile *ngFor="let report of reportsByGroupId">
              <mat-card class="example-card">
                <mat-card-title class="title">{{ report.name }}</mat-card-title>
                <mat-card-content>
                  <p>{{ report.descreption }}</p>
                </mat-card-content>
                <mat-card-actions>
                  <button
                    mat-button
                    class="viewButton"
                    (click)="viewReportFilterDetails(report)"
                  >
                    View
                  </button>
                </mat-card-actions>
              </mat-card>
            </mat-grid-tile>
          </mat-grid-list>
          </mat-tab>
        </mat-tab-group>
<!--      </mat-tab-nav-panel>-->
    </div>
  `, isInline: true, styles: ["\n      .example-card {\n        max-width: 350px;\n        border-radius: 8px;\n        height: 160px;\n        overflow: auto;\n        width: 93%\n      }\n\n      .viewButton {\n        background: #FF6600;\n        color: #ffffff;\n        float: right;\n      }\n      .title{\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.34px;\n        color: #1B1B1B;\n        opacity: 1;\n        margin-bottom: 15px;\n      }\n      .reportsContainer{\n        margin: 30px;\n      }\n      .tabs{\n        margin: 45px;\n      }\n      .space{\n        margin-top: 20px;\n      }\n\n      /*:host::ng-deep.mat-tab-label ,*/\n      /*:host::ng-deep.mat-tab-link {*/\n      /*  border: 1px solid #cecece;*/\n      /*  border-radius: 10px;*/\n      /*  margin-right: 25px;*/\n      /*  font-size: 16px;*/\n      /*}*/\n      /*:host::ng-deep.mat-tab-header {*/\n      /*  border-bottom: 1px solid transparent;*/\n      /*}*/\n      /*:host::ng-deep.mat-tab-label:focus:not(.mat-tab-disabled),*/\n      /*:host::ng-deep.mat-tab-label-active*/\n      /*{*/\n      /*  opacity: 1;*/\n      /*  border: 2px solid #ff6600;*/\n      /*  border-radius: 6px;*/\n      /*}*/\n      /*:host::ng-deep.mat-tab-group.mat-primary .mat-ink-bar,*/\n      /*:host::ng-deep.mat-tab-nav-bar.mat-primary .mat-ink-bar {*/\n      /*  background-color: transparent;*/\n      /*}*/\n\n      /*:host::ng-deep.mat-card-title {*/\n      /*  line-height: 1.5;*/\n      /*  font-size: 19px;*/\n      /*  font-weight: 600;*/\n      /*}*/\n    "], components: [{ type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReportsComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'lib-reports-groups',
                    template: `
    <div class="reportsContainer">
      <div class="title">
        Marketing Reports
      </div>
        <mat-tab-group *ngIf="reportsGroups" (selectedIndexChange)="onTabChanged($event)">
          <mat-tab  [id]="group.id" *ngFor="let group of reportsGroups;let i=index"
                    label="{{group.name}}" >
          <mat-grid-list  class="space" [cols]="breakpoint" (window:resize)="onResize($event)" rowHeight="200px">
            <mat-grid-tile *ngFor="let report of reportsByGroupId">
              <mat-card class="example-card">
                <mat-card-title class="title">{{ report.name }}</mat-card-title>
                <mat-card-content>
                  <p>{{ report.descreption }}</p>
                </mat-card-content>
                <mat-card-actions>
                  <button
                    mat-button
                    class="viewButton"
                    (click)="viewReportFilterDetails(report)"
                  >
                    View
                  </button>
                </mat-card-actions>
              </mat-card>
            </mat-grid-tile>
          </mat-grid-list>
          </mat-tab>
        </mat-tab-group>
<!--      </mat-tab-nav-panel>-->
    </div>
  `,
                    styles: [
                        `
      .example-card {
        max-width: 350px;
        border-radius: 8px;
        height: 160px;
        overflow: auto;
        width: 93%
      }

      .viewButton {
        background: #FF6600;
        color: #ffffff;
        float: right;
      }
      .title{
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.34px;
        color: #1B1B1B;
        opacity: 1;
        margin-bottom: 15px;
      }
      .reportsContainer{
        margin: 30px;
      }
      .tabs{
        margin: 45px;
      }
      .space{
        margin-top: 20px;
      }

      /*:host::ng-deep.mat-tab-label ,*/
      /*:host::ng-deep.mat-tab-link {*/
      /*  border: 1px solid #cecece;*/
      /*  border-radius: 10px;*/
      /*  margin-right: 25px;*/
      /*  font-size: 16px;*/
      /*}*/
      /*:host::ng-deep.mat-tab-header {*/
      /*  border-bottom: 1px solid transparent;*/
      /*}*/
      /*:host::ng-deep.mat-tab-label:focus:not(.mat-tab-disabled),*/
      /*:host::ng-deep.mat-tab-label-active*/
      /*{*/
      /*  opacity: 1;*/
      /*  border: 2px solid #ff6600;*/
      /*  border-radius: 6px;*/
      /*}*/
      /*:host::ng-deep.mat-tab-group.mat-primary .mat-ink-bar,*/
      /*:host::ng-deep.mat-tab-nav-bar.mat-primary .mat-ink-bar {*/
      /*  background-color: transparent;*/
      /*}*/

      /*:host::ng-deep.mat-card-title {*/
      /*  line-height: 1.5;*/
      /*  font-size: 19px;*/
      /*  font-weight: 600;*/
      /*}*/
    `,
                    ],
                }]
        }], ctorParameters: function () { return [{ type: i1.ReportsService }]; }, propDecorators: { urlReportGroups: [{
                type: Input
            }], reportGroupByIdUrl: [{
                type: Input
            }], onViewClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 