import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexNonAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexYAxis,
  ApexTitleSubtitle,
  ApexDataLabels,
  ApexStroke,
  ApexFill,
  ApexLegend,
  ApexTooltip,
  ApexMarkers,
  ApexPlotOptions,
  ApexResponsive,
  ApexGrid,
  ApexAnnotations,
  ApexStates,
  ApexTheme,
  NgApexchartsModule,
} from 'ng-apexcharts';

export type ChartOptions = {
  series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
  chart?: ApexChart;
  xaxis?: ApexXAxis;
  yaxis?: ApexYAxis | ApexYAxis[];
  title?: ApexTitleSubtitle;
  subtitle?: ApexTitleSubtitle;
  dataLabels?: ApexDataLabels;
  stroke?: ApexStroke;
  fill?: ApexFill;
  legend?: ApexLegend;
  tooltip?: ApexTooltip;
  markers?: ApexMarkers;
  plotOptions?: ApexPlotOptions;
  responsive?: ApexResponsive[];
  grid?: ApexGrid;
  annotations?: ApexAnnotations;
  states?: ApexStates;
  theme?: ApexTheme;
  colors?: string[];
  labels?: any;
};

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [NgApexchartsModule],
  templateUrl: './chart.component.html',
})
export class AppChart implements AfterViewInit, OnDestroy {
  @ViewChild('chart') chart!: ChartComponent;
  private colors: any = [
          '#008FFB',
          '#00E396',
          '#FEB019',
          '#FF4560',
          '#775DD0',
          '#00D9E9',
          '#FF66C3',
        ];

  private shuffleArray = (array: any): any => {
          for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1))
            var temp = array[i]
            array[i] = array[j]
            array[j] = temp
          }
          return array
        };

  private arrayData: any = [
          {
            y: 400,
            quarters: [
              {
                x: 'Q1',
                y: 120,
              },
              {
                x: 'Q2',
                y: 90,
              },
              {
                x: 'Q3',
                y: 100,
              },
              {
                x: 'Q4',
                y: 90,
              },
            ],
          },
          {
            y: 430,
            quarters: [
              {
                x: 'Q1',
                y: 120,
              },
              {
                x: 'Q2',
                y: 110,
              },
              {
                x: 'Q3',
                y: 90,
              },
              {
                x: 'Q4',
                y: 110,
              },
            ],
          },
          {
            y: 448,
            quarters: [
              {
                x: 'Q1',
                y: 70,
              },
              {
                x: 'Q2',
                y: 100,
              },
              {
                x: 'Q3',
                y: 140,
              },
              {
                x: 'Q4',
                y: 138,
              },
            ],
          },
          {
            y: 470,
            quarters: [
              {
                x: 'Q1',
                y: 150,
              },
              {
                x: 'Q2',
                y: 60,
              },
              {
                x: 'Q3',
                y: 190,
              },
              {
                x: 'Q4',
                y: 70,
              },
            ],
          },
          {
            y: 540,
            quarters: [
              {
                x: 'Q1',
                y: 120,
              },
              {
                x: 'Q2',
                y: 120,
              },
              {
                x: 'Q3',
                y: 130,
              },
              {
                x: 'Q4',
                y: 170,
              },
            ],
          },
          {
            y: 580,
            quarters: [
              {
                x: 'Q1',
                y: 170,
              },
              {
                x: 'Q2',
                y: 130,
              },
              {
                x: 'Q3',
                y: 120,
              },
              {
                x: 'Q4',
                y: 160,
              },
            ],
          },
        ];

  private makeData = (): any => {
          var dataSet = this.shuffleArray(this.arrayData)
  
          var dataYearSeries = [
            {
              x: '2011',
              y: dataSet[0].y,
              color: this.colors[0],
              quarters: dataSet[0].quarters,
            },
            {
              x: '2012',
              y: dataSet[1].y,
              color: this.colors[1],
              quarters: dataSet[1].quarters,
            },
            {
              x: '2013',
              y: dataSet[2].y,
              color: this.colors[2],
              quarters: dataSet[2].quarters,
            },
            {
              x: '2014',
              y: dataSet[3].y,
              color: this.colors[3],
              quarters: dataSet[3].quarters,
            },
            {
              x: '2015',
              y: dataSet[4].y,
              color: this.colors[4],
              quarters: dataSet[4].quarters,
            },
            {
              x: '2016',
              y: dataSet[5].y,
              color: this.colors[5],
              quarters: dataSet[5].quarters,
            },
          ]
  
          return dataYearSeries
        };

  private updateQuarterChart = (sourceChart: any, destChartIDToUpdate: any): any => {
          var series = []
          var seriesIndex = 0
          var colors = []
  
          if (sourceChart.w.globals.selectedDataPoints[0]) {
            var selectedPoints = sourceChart.w.globals.selectedDataPoints
            for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
              var selectedIndex = selectedPoints[seriesIndex][i]
              var yearSeries = sourceChart.w.config.series[seriesIndex]
              series.push({
                name: yearSeries.data[selectedIndex].x,
                data: yearSeries.data[selectedIndex].quarters,
              })
              colors.push(yearSeries.data[selectedIndex].color)
            }
  
            if (series.length === 0)
              series = [
                {
                  data: [],
                },
              ]
  
            return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
              series: series,
              colors: colors,
              fill: {
                colors: colors,
              },
            })
          }
        };

  public chartOptions: Partial<ChartOptions> = {
          series: [
            {
              data: this.makeData(),
            },
          ],
          chart: {
            id: 'barYear',
            height: 400,
            width: '100%',
            type: 'bar',
            events: {
              dataPointSelection: (e, chart, opts) => {
                var quarterChartEl = document.querySelector('#chart-quarter')
                var yearChartEl = document.querySelector('#chart-year')
  
                if (opts.selectedDataPoints[0].length === 1) {
                  if (quarterChartEl.classList.contains('active')) {
                    this.updateQuarterChart(chart, 'barQuarter')
                  } else {
                    yearChartEl.classList.add('chart-quarter-activated')
                    quarterChartEl.classList.add('active')
                    this.updateQuarterChart(chart, 'barQuarter')
                  }
                } else {
                  this.updateQuarterChart(chart, 'barQuarter')
                }
  
                if (opts.selectedDataPoints[0].length === 0) {
                  yearChartEl.classList.remove('chart-quarter-activated')
                  quarterChartEl.classList.remove('active')
                }
              },
              updated: (chart) => {
                this.updateQuarterChart(chart, 'barQuarter')
              },
            },
          },
          plotOptions: {
            bar: {
              distributed: true,
              horizontal: true,
              barHeight: '75%',
              dataLabels: {
                position: 'bottom',
              },
            },
          },
          dataLabels: {
            enabled: true,
            textAnchor: 'start',
            style: {
              colors: ['#fff'],
            },
            formatter: (val, opt) => {
              return opt.w.globals.labels[opt.dataPointIndex]
            },
            offsetX: 0,
            dropShadow: {
              enabled: true,
            },
          },
  
          colors: this.colors,
  
          states: {
            normal: {
              filter: {
                type: 'desaturate',
              },
            },
            active: {
              allowMultipleDataPointsSelection: true,
              filter: {
                type: 'darken',
                value: 1,
              },
            },
          },
          tooltip: {
            x: {
              show: false,
            },
            y: {
              title: {
                formatter: (val, opts) => {
                  return opts.w.globals.labels[opts.dataPointIndex]
                },
              },
            },
          },
          title: {
            text: 'Yearly Results',
            offsetX: 15,
          },
          subtitle: {
            text: '(Click on bar to see details)',
            offsetX: 15,
          },
          yaxis: {
            labels: {
              show: false,
            },
          },
        };

  public chartOptions2: Partial<ChartOptions> = {
          series: [
            {
              data: [],
            },
          ],
          chart: {
            id: 'barQuarter',
            height: 400,
            width: '100%',
            type: 'bar',
            stacked: true,
          },
          plotOptions: {
            bar: {
              columnWidth: '50%',
              horizontal: false,
            },
          },
          legend: {
            show: false,
          },
          grid: {
            yaxis: {
              lines: {
                show: false,
              },
            },
            xaxis: {
              lines: {
                show: true,
              },
            },
          },
          yaxis: {
            labels: {
              show: false,
            },
          },
          title: {
            text: 'Quarterly Results',
            offsetX: 10,
          },
          tooltip: {
            x: {
              formatter: (val, opts) => {
                return opts.w.globals.seriesNames[opts.seriesIndex]
              },
            },
            y: {
              title: {
                formatter: (val, opts) => {
                  return opts.w.globals.labels[opts.dataPointIndex]
                },
              },
            },
          },
        };
  ngAfterViewInit() {
    (window as any).ApexCharts.setLicense('APEX-eyJpc3N1ZURhdGUiOiIyMDI2LTA0LTE2IiwiZXhwaXJ5RGF0ZSI6IjIwNTItMDQtMTciLCJwbGFuIjoiZW50ZXJwcmlzZSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiXX0=');
    (window as any).Apex = {
            chart: {
              toolbar: {
                show: false,
              },
            },
            tooltip: {
              shared: false,
            },
            legend: {
              show: false,
            },
          }
  }

  ngOnDestroy() {
    // no cleanup needed
  }
}