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 mulberry32 = (seed: any): any => {
        return function () {
          seed |= 0
          seed = (seed + 0x6d2b79f5) | 0
          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
          return ((t ^ (t >>> 14)) >>> 0) / 4294967296
        }
      };

  private MARKETS: any = [
        'Amsterdam',
        'Antwerp',
        'Athens',
        'Auckland',
        'Austin',
        'Bergen',
        'Bilbao',
        'Bologna',
        'Bristol',
        'Calgary',
        'Cardiff',
        'Cork',
        'Dublin',
        'Dundee',
        'Edinburgh',
        'Galway',
        'Ghent',
        'Graz',
        'Helsinki',
        'Kingston',
        'Leeds',
        'Leiden',
        'Lisbon',
        'Lyon',
        'Malaga',
        'Malmo',
        'Nantes',
        'Oporto',
        'Oslo',
        'Ottawa',
        'Padua',
        'Perth',
        'Reykjavik',
        'Rotterdam',
        'Salerno',
        'Seville',
        'Tampere',
        'Turin',
        'Turku',
        'Utrecht',
        'Verona',
        'Zurich',
      ];

  private MONTHS: any = 36;

  private START: any = new Date(2023, 0, 1).getTime();

  private MONTH_MS: any = 30.44 * 24 * 3600 * 1000;

  private activationSeries = (seed: any, start: any, drift: any): any => {
        var rand = this.mulberry32(seed)
        var out = []
        var v = start
        for (var m = 0; m < this.MONTHS; m++) {
          v += drift + (rand() - 0.5) * 0.55
          // A mild seasonal lift in the second half of each year.
          var season = Math.sin(((m % 12) / 12) * Math.PI * 2) * 0.28
          out.push({
            x: Math.round(this.START + m * this.MONTH_MS),
            y: Math.max(1.2, Math.round((v + season) * 100) / 100),
          })
        }
        return out
      };

  private marketSeries: any = this.MARKETS.map(function (name, i) {
        var rand = this.mulberry32(1000 + i * 13)
        var start = 2.4 + rand() * 3.2
        var drift = (rand() - 0.42) * 0.11
        return {
          name: 'Activation rate',
          market: name,
          data: this.activationSeries(200 + i * 7, start, drift),
        }
      });

  private latest: any = {};

  private ranked: any = this.MARKETS.slice().sort(function (a, b) {
        return this.latest[b] - this.latest[a]
      });

  private TOP: any = {};

  private BOTTOM: any = {};

  public chartOptions: Partial<ChartOptions> = {
          series: this.marketSeries,
          chart: {
            id: 'marketTrellis',
            type: 'line',
            height: 700,
            animations: {
              enabled: false,
            },
          },
          trellis: {
            by: 'market',
            columns: 7,
            minPanelWidth: 130,
            panelHeight: 76,
            gap: 6,
            header: {
              style: {
                fontSize: '11px',
                fontWeight: 600,
              },
            },
            panel: (key) => {
              // The value label rides the last point, so which SIDE of it has room
              // depends on where that point sits in the shared 0-10 frame: below for a
              // high panel, above for a low one. `panel()` is merged last, so the
              // per-panel offset is a two-line override.
              var side = { dataLabels: { offsetY: this.latest[key] > 5 ? 15 : -8 } }
              if (this.TOP[key]) {
                return Object.assign(
                  { colors: ['#0F766E'], chart: { background: '#EAF4F2' } },
                  side,
                )
              }
              if (this.BOTTOM[key]) {
                return Object.assign(
                  { colors: ['#B45309'], chart: { background: '#FBF1E3' } },
                  side,
                )
              }
              return Object.assign({ colors: ['#94A3B8'] }, side)
            },
          },
          stroke: {
            width: 1.5,
            curve: 'straight',
          },
          markers: {
            size: 0,
            discrete: [
              {
                seriesIndex: 0,
                dataPointIndex: 35,
                size: 3,
                strokeWidth: 0,
              },
            ],
          },
          dataLabels: {
            enabled: true,
            offsetX: -10,
            offsetY: -8,
            background: {
              enabled: false,
            },
            style: {
              fontSize: '10px',
              fontWeight: 600,
              colors: ['#475569'],
            },
            formatter: (val, opts) => {
              var d = opts.w.config.series[opts.seriesIndex].data
              return opts.dataPointIndex === d.length - 1 ? Number(val).toFixed(1) : ''
            },
          },
          yaxis: {
            labels: {
              show: false,
            },
          },
          xaxis: {
            type: 'datetime',
            labels: {
              show: false,
            },
            axisTicks: {
              show: false,
            },
            axisBorder: {
              show: false,
            },
            tooltip: {
              enabled: false,
            },
          },
          grid: {
            show: false,
            padding: {
              left: 4,
              right: 4,
            },
          },
          tooltip: {
            x: {
              format: 'MMM yyyy',
            },
          },
        };
  ngAfterViewInit() {
    (window as any).ApexCharts.setLicense('APEX-eyJleHBpcnlEYXRlIjoiMjEyNi0wNy0wNCIsImlzc3VlRGF0ZSI6IjIwMjYtMDctMjgiLCJwbGFuIjoicHJlbWl1bSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiLCJsb2NhbGhvc3QiXSwic2lnIjoieVBmb1VCc0Z3TU9ZdUEyaEZkR0I2Y1FtZ0JITUtXcVdJSjB2NVRESXRZbFR3eDJMUmh6R2x0RUc3VXJ4X0s3b25ZMWRZb2Z2VGItN01ydFYyNDVyOWcifQ==');
    this.marketSeries.forEach(function (s) {
          this.latest[s.market] = s.data[s.data.length - 1].y
        })
    this.ranked.slice(0, 5).forEach(function (m) {
          this.TOP[m] = true
        })
    this.ranked.slice(-5).forEach(function (m) {
          this.BOTTOM[m] = true
        })
  }

  ngOnDestroy() {
    // no cleanup needed
  }
}