import { Component, OnInit } from '@angular/core';
import { DropDownSize } from '@progress/kendo-angular-dropdowns/dist/es2015/common/models/size';
import { LineCap } from '@progress/kendo-drawing';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/auth/services/auth.service';
import { DashboardSeller, SaleSeller } from 'src/app/models/dashboard-seller-new.model';
import { DashboardService } from 'src/app/services/dashboard.service';
import { LookupService } from 'src/app/services/lookup.service';
import { process } from '@progress/kendo-data-query';

@Component({
  selector: 'app-dashboard-seller',
  templateUrl: './dashboard-seller.component.html',
  styleUrls: ['./dashboard-seller.component.scss']
})
export class DashboardSellerComponent implements OnInit {

  constructor(
    public readonly dashboardService: DashboardService,
    public readonly lookupService: LookupService,
    public readonly authService: AuthService) { }

  public gridData: SaleSeller[] = [];
  dataSellerSale: DashboardSeller;
  public showLabels = true;
  public showTicks = true;
  public reverse = false;
  public autoCorrect = true;
  public listItems: Array<string> = ["round", "butt"];

  public startAngle = 0;
  public endAngle = 180;
  public rangeSize = 20;

  public rangeLineCap: LineCap = "round";

  public rangePlaceholderColor = "rgba(228, 228, 228, 1)";
  public ticksColor = "rgba(0, 128,0, 1)";
  public labelsColor = "rgba(0, 0, 255, 1)";

  public showFilter = false;
  public dateFilterInitial = new Date();
  public dateFilterFinal = new Date();
  public size: DropDownSize = "medium";
  public allowFilter = false;
  supervisores$: Observable<any[]>;
  selectedSupervisores: any[];

  public colors = [
    {
      to: 25,
      color: "#f31700",
    },
    {
      from: 25,
      to: 50,
      color: "#f31700", //"#37b400"
    },
    {
      from: 50,
      to: 70,
      color: "#ffc000",
    },
    {
      from: 70,
      color: "#0aac25af",
    },
  ];

  public colorsProfit = [
    {
      to: 0,
      color: "#f31700",
    },
    {
      from: 0,
      to: 20,
      color: "#f31700", //"#37b400"
    },
    {
      from: 20,
      to: 30,
      color: "#ffc000",
    },
    {
      from: 30,
      color: "#0aac25af",
    },
  ];


  ngOnInit(): void {
    this.authService.getActionsUser(1).subscribe(data => {
      this.allowFilter = false;
      if ( data != null ) {
        const actionFilter = data.filter(a => a.moduleId == 1  &&
                  a.processId == 1 && a.pageId == 2 &&
                  a.actionId == 1 && a.userId == this.authService.getUser() && a.access == 'S');
        this.allowFilter = actionFilter.length > 0;
      }
    });
    this.supervisores$ = this.lookupService.getSupervisores();
    this.dashboardService.getSellerSale()
      .subscribe(data => {
        this.dataSellerSale = data;
        this.gridData = this.dataSellerSale.saleSupervisor;
      });
  }

  showDialogFilter() {
    this.showFilter = true;
  }

  public closeDialogFilter(status: string): void {
    console.log(`Dialog result: ${status}`);
    console.log('Supevisores Selecionados: ' + JSON.stringify(this.selectedSupervisores));
    const supervisorIds = this.selectedSupervisores.map(s => s.supervisorId);
    console.log('Ids Supervisor: ' + JSON.stringify(supervisorIds));
    this.showFilter = false;
    this.dashboardService.getStoresSale(supervisorIds)
      .subscribe(data => {
        this.dataSellerSale = data;
        this.gridData = this.dataSellerSale.saleSupervisor;
      });
  }

}
