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 COUNTRIES: any = [
          'Japan',
          'United States',
          'Germany',
          'Brazil',
          'South Korea',
          'China',
          'Nigeria',
          'India',
          'Kenya',
        ];

  private ACCENT: any = '#0EA5E9';

  private COLORS: any = this.COUNTRIES.map(function () {
          return this.ACCENT
        });

  private YEARS: any = {
          2020: {
            label: '2020',
            caption:
              'By 2020 most of the world lives in a city. The tiles that were nearly empty in 1980, China and Nigeria among them, have filled in fast.',
            // urban population, % of total (illustrative, ~2020)
            values: [92, 83, 77, 87, 81, 61, 52, 35, 28],
          },
          1980: {
            label: '1980',
            caption:
              'In 1980 cities were still the exception across much of Asia and Africa: barely a fifth of China lived in one. Each square is one percent of the population.',
            // urban population, % of total (illustrative, ~1980)
            values: [76, 74, 73, 66, 57, 19, 22, 23, 16],
          },
        };

  private buttons: any = document.querySelectorAll('#year-nav button');

  private caption: any = document.getElementById('caption');

  private showYear = (key: any): any => {
          this.buttons.forEach(function (b) {
            b.classList.toggle('active', b.getAttribute('data-year') === key)
          })
          this.caption.textContent = this.YEARS[key].caption
          this.chart.updateSeries(this.YEARS[key].values)
        };

  public chartOptions: Partial<ChartOptions> = {
          series: this.YEARS['2020'].values,
          chart: {
            id: 'urbanWaffle',
            type: 'waffle',
            height: 560,
            animations: {
              enabled: true,
              speed: 650,
            },
          },
          labels: this.COUNTRIES,
          colors: this.COLORS,
          legend: {
            show: false,
          },
          plotOptions: {
            unit: {
              grid: {
                split: true,
                columns: 10,
                total: 100,
                max: 100,
                trackColor: '#E8EDF2',
              },
              spacing: 1.2,
              clusterLabels: {
                show: true,
                position: 'bottom',
                fontSize: '12px',
                fontWeight: 600,
                color: '#334155',
                formatter: (name, o) => {
                  return name + ' · ' + Math.round(o.value) + '%'
                },
              },
            },
          },
        };
  ngAfterViewInit() {
    (window as any).ApexCharts.setLicense('APEX-eyJpc3N1ZURhdGUiOiIyMDI2LTA0LTE2IiwiZXhwaXJ5RGF0ZSI6IjIwNTItMDQtMTciLCJwbGFuIjoiZW50ZXJwcmlzZSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiXX0=');

    function showYear(key) {
            this.buttons.forEach(function (b) {
              b.classList.toggle('active', b.getAttribute('data-year') === key)
            })
            this.caption.textContent = this.YEARS[key].caption
            this.chart.updateSeries(this.YEARS[key].values)
          }
    this.buttons.forEach(function (btn) {
            btn.addEventListener('click', () => {
              this.showYear(btn.getAttribute('data-year'))
            })
          })
  }

  ngOnDestroy() {
    // no cleanup needed
  }
}