import { Component } from '@angular/core';
import { single, multi } from './charts.data';
import { DashboardService } from './dashboard.service';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import * as moment from 'moment';
import { CurrencyPipe, DatePipe } from '@angular/common';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  providers:[CurrencyPipe],
})
export class DashboardComponent {
  private currencyPipe1:CurrencyPipe

  public single: any[];
  public multi: any[];
  public showXAxis = true;
  public showYAxis = true;
  public gradient = false;
  public showLegend = false;
  public showXAxisLabel = false;
  public xAxisLabel = 'Year';
  public showYAxisLabel = false;
  public yAxisLabel = 'Population';
  public colorScheme = {
    domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
  }; 
  public autoScale = true;
  count: any = [];

   // Shared chart options
   globalChartOptions: any = {
    responsive: true,
    legend: {
      display: true,
      position: 'top'
    }
  };

  doughnutOptions: any = Object.assign({
    elements: {
      arc: {
        borderWidth: 3
      }
    }
  }, this.globalChartOptions);
    // Round Pie Chart 1
    pieChartData: number[] = []; 
    doughnutChartColors: any[] = [{
      backgroundColor: [] = []
    }];
    pieChartLabels: string[] = [];
    pieChartType = 'pie';


   // Round Pie Chart 2
   globalChartOptions2: any = {
    responsive: true,
    legend: {
      display: true,
      position: 'top'
    }
  };

  doughnutOptions2: any = Object.assign({
    elements: {
      arc: {
        borderWidth: 3
      }
    }
  }, this.globalChartOptions2);
   pieChartData2: number[] = []; 
   doughnutChartColors2: any[] = [{
     backgroundColor: []
   }];
   pieChartLabels2: string[] = [];
   pieChartType2 = 'pie';


   // Round Pie Chart 3
   globalChartOptions3: any = {
    responsive: true,
    legend: {
      display: true,
      position: 'top'
    }
  };

  doughnutOptions3: any = Object.assign({
    elements: {
      arc: {
        borderWidth: 3
      }
    }
  }, this.globalChartOptions3);
   pieChartData3: number[] = []; 
   doughnutChartColors3: any[] = [{
     backgroundColor: []
   }];
   pieChartLabels3: string[] = [];
   pieChartType3 = 'pie';


    // Round Pie Chart 4
    globalChartOptions4: any = {
      responsive: true,
      legend: {
        display: true,
        position: 'top'
      }
    };
  
    doughnutOptions4: any = Object.assign({
      elements: {
        arc: {
          borderWidth: 3
        }
      }
    }, this.globalChartOptions4);
    pieChartData4: number[] = []; 
    doughnutChartColors4: any[] = [{
    backgroundColor: []
    }];
    pieChartLabels4: string[] = [];
    pieChartType4 = 'pie';

// Bar
barChartLabels: string[] = ['1', '2', '3', '4', '5', '6', '7'];
barChartType = 'bar';
barChartLegend = true;
barChartData: any[] = [{
  data: [6, 5, 8, 8, 5, 5, 4],
  label: 'Series A',
  borderWidth: 0
}, {
  data: [5, 4, 4, 2, 6, 2, 5],
  label: 'Series B',
  borderWidth: 0
}];
barChartOptions: any = Object.assign({
  scaleShowVerticalLines: false,
  tooltips: {
    mode: 'index',
    intersect: false
  },
  responsive: true,
  scales: {
    xAxes: [{
      gridLines: {
        color: 'rgba(0,0,0,0.02)',
        defaultFontColor: 'rgba(0,0,0,0.02)',
        zeroLineColor: 'rgba(0,0,0,0.02)'
      },
      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }],
    yAxes: [{
      gridLines: {
        color: 'rgba(0,0,0,0.02)',
         defaultFontColor: 'rgba(0,0,0,0.02)',
        zeroLineColor: 'rgba(0,0,0,0.02)'
      },
      stacked: true
    }]
  }
}, this.globalChartOptions);

// Bubble Chart
bubbleChartData: Array <any> = [{
  data: [{
    x: 6,
    y: 5,
    r: 15,
  }, {
    x: 5,
    y: 4,
    r: 10,
  }, {
    x: 8,
    y: 4,
    r: 6,
  }, {
    x: 8,
    y: 4,
    r: 6,
  }, {
    x: 5,
    y: 14,
    r: 14,
  }, {
    x: 5,
    y: 6,
    r: 8,
  }, {
    x: 4,
    y: 2,
    r: 10,
  }],
  label: 'Series A',
  borderWidth: 1
}];
bubbleChartType = 'bubble';

// combo chart
comboChartLabels: Array <any> = [];
chartColors2: Array <any> = [  
  { // grey
    backgroundColor: '#5fc983',
    borderColor: '#5fc983',
    pointBackgroundColor: '#5fc983',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: '#5fc983'
  }
  ];
chartColors: Array <any> = [
//   { // red
//   backgroundColor: '#f44336',
//   borderColor: '#f44336',
//   pointBackgroundColor: '#f44336',
//   pointBorderColor: '#fff',
//   pointHoverBackgroundColor: '#fff',
//   pointHoverBorderColor: 'rgba(148,159,177,0.8)'
// },
// { // grey
//   backgroundColor: '#5fc983',
//   borderColor: '#5fc983',
//   pointBackgroundColor: '#5fc983',
//   pointBorderColor: '#fff',
//   pointHoverBackgroundColor: '#fff',
//   pointHoverBorderColor: '#5fc983'
// },
 { // blue
  backgroundColor: '#76b0a6',
  borderColor: '#1f7f6f',
  pointBackgroundColor: '#1f7f6f',
  pointBorderColor: '#fff',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}, 
// { // grey
//   backgroundColor: '#5fc983',
//   borderColor: '#5fc983',
//   pointBackgroundColor: '#5fc983',
//   pointBorderColor: '#fff',
//   pointHoverBackgroundColor: '#fff',
//   pointHoverBorderColor: '#5fc983'
// }
];
comboChartLegend = true;
ComboChartData: Array <any> = [{
  data: [],
  label: 'Count of Appointment',
  borderWidth: 1,
  type: 'line',
  fill: false
}
 
];
ComboChartData2: Array <any> = [{
  data: [],
  label: '',
  borderWidth: 1,
  type: 'line',
  fill: false
} 
];
ComboChartOptions: any = Object.assign({
  animation: false,
  scales: {
    xAxes: [{
      gridLines: {
        color: 'rgba(0,0,0,0.02)',
        zeroLineColor: 'rgba(0,0,0,0.02)'
      }
    }],
    yAxes: [{
      gridLines: {
        color: 'rgba(0,0,0,0.02)',
        zeroLineColor: 'rgba(0,0,0,0.02)'
      },
      ticks: {
        beginAtZero: true,
        suggestedMax: 9,
      }
    }]
  }
}, this.globalChartOptions);

// newsfeed
messages: Object[] = [{
  from: 'Carolyn',
  message: 'Contrary to popular belief, Lorem Ipsum',
  photo: 'assets/images/face3.jpg',
  subject: 'Met, consectetur adipisic',
}, {
  from: 'Chloe',
  message: 'It has roots in a piece of classica',
  photo: 'assets/images/face6.jpg',
  subject: 'Consectetur adipisic',
}, {
  from: 'Diana',
  message: 'Professor at Hampden-Sydney College in Virginia',
  photo: 'assets/images/face4.jpg',
  subject: 'Onsectetur adipisic',
}, ];
  finalChartPie: any = [];
  practitionerPieChart: any = [];
  servicePieChart: any = [];
    
  ranges: any = {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [
      moment().subtract(1, 'month').startOf('month'),
      moment().subtract(1, 'month').endOf('month')
    ]
  };
  selectedDateRange: {startDate: moment.Moment, endDate: moment.Moment};
  currentDate: Date;
  lineChart: any = [];
  user_role: any;
  currency: any;
  countAndRevenue: boolean = false;
  currencyHtmlCode: any;

  constructor(private currencySymbol: CurrencyPipe,public _dash:DashboardService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer) {
    // this.fetch((data) => { this.rows = data; });
    Object.assign(this, {single, multi}) 
    this.matIconRegistry.addSvgIcon(
      'service',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/service_icon.svg')
    );
    this.user_role = localStorage.getItem('user_role')

    this.currency = localStorage.getItem('currency')
    console.log(this.currency)
    // Usage example
    // const currencyName = 'INR';
     this.currencyHtmlCode = this.getCurrencyHtmlCode(this.currency);
  }

  ngOnInit() {
    let user_role = localStorage.getItem('user_role')
    let param
    if(user_role == 'PRACTITIONER'){
       param = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId')}
    }else{
       param = {'busId':localStorage.getItem('busId')}
    }
    
     this.getCount(param)
     
     //Start Line Chart
     this.currentDate = new Date();
     let startDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
     let EndDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
     console.log(startDate,EndDate); 
      let lineParams
      if(user_role == 'BIZADMIN'){
       lineParams = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
       this.getLineChartData(lineParams)
      }  
     
     //End Line Chart
     
  }

  getCount(param){
    console.log(param)
    this._dash.getCountDetails(param).subscribe(res => {
      if (res.status == 200) {          
        console.log(res)
        this.count = res['data'] 

        this.currentDate = new Date();
        let startDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
        let EndDate = new DatePipe('en-US').transform(this.currentDate, 'yyyy-MM-dd')
        console.log(startDate,EndDate); 
        let user_role = localStorage.getItem('user_role')
        let pieChartParams
         if(user_role == 'PRACTITIONER'){
          pieChartParams = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
        }else{
          pieChartParams = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
        }
        console.log(pieChartParams)
        this.getPieChartData(pieChartParams)  
      } 
    })
  }

  getPieChartData(param){
    console.log(param)
    this._dash.getPieChartDetails(param).subscribe(res => {
      if (res.status == 200) {      
        console.log(res)
        this.practitionerPieChart = res['data'].finalchart
        console.log(this.practitionerPieChart)
        let practitionerName = this.practitionerPieChart.map(val => val.doctor_name)
        this.pieChartLabels = practitionerName
        this.pieChartLabels2 = practitionerName
        let practiAppointCount = this.practitionerPieChart.map(val => val.appoinments_count)
        this.pieChartData = practiAppointCount
        for(let id of practitionerName){
          var x = Math.floor(Math.random() * 245);
          var y = Math.floor(Math.random() * 245);
          var z = Math.floor(Math.random() * 245);
          console.log(this.doughnutChartColors)
          this.doughnutChartColors[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
        }
        let practiRevenue = this.practitionerPieChart.map(val => val.amount)
        console.log(practiRevenue) 
        // practiRevenue.forEach(element => {
        //   console.log(element)
        //   let amount = this.currencySymbol.transform(element,this.currency, 'symbol');
        //   console.log(amount)
        //   element = amount
        //   console.log(element)
        //   this.pieChartData2.push(element)
        // });
        // console.log(this.pieChartData2)
        this.pieChartData2 = practiRevenue 
         
        for(let id of practiRevenue){
          var x = Math.floor(Math.random() * 256);
          var y = Math.floor(Math.random() * 256);
          var z = Math.floor(Math.random() * 256);
          console.log(this.doughnutChartColors)
          this.doughnutChartColors2[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");     
        }
        // this.random_bg_color()

        this.getPieChartServiceData(param)
      }
    })
  }


  getPieChartServiceData(param){
    console.log(param)
    this._dash.getPieChartServiceDetails(param).subscribe(res => {
      if (res.status == 200) {      
        console.log(res)
        this.servicePieChart = res['data'].finalchart
        console.log(this.servicePieChart)
        let serviceName = this.servicePieChart.map(val => val.service_name)
        this.pieChartLabels3 = serviceName
        this.pieChartLabels4 = serviceName
        let serviceAppointCount = this.servicePieChart.map(val => val.appoinments_count)
        this.pieChartData3 = serviceAppointCount
        for(let id of serviceAppointCount){
          var x = Math.floor(Math.random() * 266);
          var y = Math.floor(Math.random() * 266);
          var z = Math.floor(Math.random() * 266);
          console.log(this.doughnutChartColors3)
          this.doughnutChartColors3[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
        }
        let serviceRevenue = this.servicePieChart.map(val => val.amount)
        this.pieChartData4 = serviceRevenue
        for(let id of serviceRevenue){
          var x = Math.floor(Math.random() * 276);
          var y = Math.floor(Math.random() * 276);
          var z = Math.floor(Math.random() * 276);
          console.log(this.doughnutChartColors4)
          this.doughnutChartColors4[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");     
        }
      }
    })
  }
  getLineChartData(param){
    console.log(param)
    this._dash.getLineChart(param).subscribe(res => {
      if (res.status == 200) {      
        console.log(res)
        this.lineChart = res['data']
        console.log(this.lineChart)
        this.lineChart.sort((a, b) => {
          const dateA:any = new Date(a.date);
          const dateB:any = new Date(b.date);
          return dateA - dateB;
        });
        let linecount = this.lineChart.map(val => val.count)
        let lineMonth = this.lineChart.map(val => val.date)
        let lineFees = this.lineChart.map(val => val.fees)
        this.comboChartLabels = lineMonth
        console.log(linecount,lineMonth,lineFees)
        console.log(this.ComboChartData)
        this.ComboChartData[0].data = linecount
        this.ComboChartData2[0].data = lineFees
        this.ComboChartData2[0].label = 'Revenue ' + this.currencyHtmlCode
        // this.ComboChartData.forEach(element => {
        //   console.log(element)
        //   if(element.type == 'line'){
        //     element.data = linecount
        //   } 
        //   if(element.type == 'bar') {
        //     element.data = lineFees
        //   }
        // });
        console.log(this.ComboChartData)
      }
    })
  }
  

//   random_bg_color() {
//     for(let id of this.practitionerPieChart){
//     var x = Math.floor(Math.random() * 245);
//     var y = Math.floor(Math.random() * 235);
//     var z = Math.floor(Math.random() * 256);
//     console.log(this.doughnutChartColors)
//     this.doughnutChartColors[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");
//     this.doughnutChartColors2[0].backgroundColor.push("rgb(" + x + "," + y + "," + z + ")");     
//   }
// }


  onSelect(event) {
    console.log(event);
  }


  // open(e) {
  //   console.log(e);
  //   // this.pickerDirective.open(e);
  // }

  // // Function to call when the input value changes.
  // onChange = () => {
  // }

  // // Function to call when the input is touched.
  // onTouched = () => {
  // }

  // // Allows Angular to update the model (rating).
  // // Update the model and changes needed for the view here.
  // writeValue(obj: any): void {
  //   console.log(obj);
  // }

  // // Allows Angular to register a function to call when the model (rating) changes.
  // // Save the function as a property to call later here.
  // registerOnChange(fn: any): void {
  //   console.log(fn);
  //   // this.onChange = fn;
  // }

  // // Allows Angular to register a function to call when the input has been touched.
  // // Save the function as a property to call later here.
  // registerOnTouched(fn: () => void): void {
  //   this.onTouched = fn;
  // }

  // // Allows Angular to disable the input.
  // setDisabledState(isDisabled: boolean): void {
  //   // this.disabled = isDisabled;
  // }

  // onInputChange() {
  //   console.log('Input value changed:', this.selectedDateRange);
  //   // Perform your desired logic here
  // }

  dateWiseFilter() {
    // if(this.selectedDateRange.startDate != null && this.selectedDateRange.endDate != null){

    console.log('Input value changed:', this.selectedDateRange);
    let startDate = new DatePipe('en-US').transform(this.selectedDateRange.startDate['$d'], 'yyyy-MM-dd')
    let EndDate = new DatePipe('en-US').transform(this.selectedDateRange.endDate['$d'], 'yyyy-MM-dd')
    console.log(startDate,EndDate); 
    let user_role = localStorage.getItem('user_role')
    let param
    if(user_role == 'PRACTITIONER'){
       param = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
    }else{
       param = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
    }
    console.log(param); 
    // Perform your desired logic here
    this.getPieChartData(param)

     //Start Line Chart
    let lineParams
    if(user_role == 'BIZADMIN'){
       lineParams = {'busId':localStorage.getItem('busId'),'fromDate':startDate,'toDate':EndDate}
    } 
    this.getLineChartData(lineParams)
     //End Line Chart
  }

// }

  onToggleChange(event){
    console.log(event) 
    this.countAndRevenue = event 
  }

  getCurrencyHtmlCode(currencyName) {
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currencyName,
    });
  
    const sampleValue = 123; // Use a sample value to retrieve the currency symbol
    const formattedValue = formatter.format(sampleValue);
  
    const match = formattedValue.match(/(\D+)/); // Extract the non-numeric part (currency symbol)
    const currencySymbol = match ? match[0] : '';
  
    const spanElement = document.createElement('span');
    spanElement.textContent = currencySymbol;
  
    return spanElement.innerHTML;
  }
}