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 DELIVERIES: any = (function () {
          var seed = 20260814
          function rand() {
            seed = (seed * 16807) % 2147483647
            return (seed - 1) / 2147483646
          }
          var out = []
          for (var i = 0; i < 640; i++) {
            var u1 = Math.max(rand(), 1e-9)
            var u2 = rand()
            var z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
            // Log-normal: a delivery can run very late but never finish early.
            out.push(Math.round(Math.exp(3.15 + z * 0.42)))
          }
          return out
        })();

  private HISTOGRAM_SERIES: any = [{ name: 'Deliveries', data: this.DELIVERIES }];

  private RAMP: any = ['#4e8cff', '#59c2b0', '#e8c14a', '#ef7d3a', '#d94040'];

  private rampColor = (t: any): any => {
          var scaled = Math.max(0, Math.min(1, t)) * (this.RAMP.length - 1)
          var i = Math.min(this.RAMP.length - 2, Math.floor(scaled))
          var f = scaled - i
          var a = this.RAMP[i]
          var b = this.RAMP[i + 1]
          var mix = function (o) {
            var av = parseInt(a.substr(o, 2), 16)
            var bv = parseInt(b.substr(o, 2), 16)
            var v = Math.round(av + (bv - av) * f)
            return (v < 16 ? '0' : '') + v.toString(16)
          }
          return '#' + mix(1) + mix(3) + mix(5)
        };

  private setReadout = (text: any): any => {
          var el = document.querySelector('#readout')
          if (el) el.innerHTML = text
        };

  private setActive = (exploded: any): any => {
          var buttons = [].slice.call(document.querySelectorAll('[data-explode]'))
          buttons.forEach(function (b) {
            b.className =
              (b.getAttribute('data-explode') === 'true') === exploded ? 'on' : ''
          })
        };

  private wireExplode = (chart: any): any => {
          var buttons = [].slice.call(document.querySelectorAll('[data-explode]'))
  
          buttons.forEach(function (b) {
            b.addEventListener('click', function () {
              // The active view's button is a no-op: re-requesting the readings while
              // already exploded would ask rowSeries() of a unit chart, which has no
              // rows to hand back.
              if (b.className === 'on') return
              var explode = b.getAttribute('data-explode') === 'true'
              this.setActive(explode)
  
              if (explode) {
                // The whole point: nothing about the sample is passed in here. The
                // chart already knows which observations it counted into each bar, so
                // rowSeries() returns one cluster per bar holding exactly those rows.
                var rows = chart.rowSeries()
                var total = rows.reduce(function (n, c) {
                  return n + c.data.length
                }, 0)
  
                // What comes back is ordinary series data, so it can be decorated.
                // Colouring each bar's dots by how late that bar was keeps the
                // distribution readable once the bars are gone: without this the blob
                // is 640 identical dots and you cannot tell a quick delivery from a
                // disastrous one.
                rows.forEach(function (cluster, k) {
                  var color = this.rampColor(rows.length > 1 ? k / (rows.length - 1) : 0)
                  cluster.data.forEach(function (d) {
                    d.fillColor = color
                  })
                })
                chart.updateOptions({
                  chart: { type: 'unit' },
                  series: rows,
                  plotOptions: {
                    unit: {
                      // NOT 'columns'. That layout would stack each bin's dots back
                      // into a column the same height and place as the bar they left,
                      // so the objects would travel a few pixels and the whole thing
                      // would look like a redraw. 'packed' gathers them into one blob,
                      // which is a real journey.
                      layout: 'packed',
                      unitValue: 1,
                      size: 3,
                    },
                  },
                  legend: { show: false },
                })
                this.setReadout(
                  'One dot per delivery: <b>' +
                    total +
                    '</b> of them, ' +
                    'gathered out of <b>' +
                    rows.length +
                    '</b> bars.',
                )
              } else {
                chart.updateOptions({
                  chart: { type: 'histogram' },
                  series: this.HISTOGRAM_SERIES,
                  legend: { show: false },
                })
                this.setReadout(
                  'Every bar is a count of the deliveries that landed in its range.',
                )
              }
            })
          })
  
          this.setActive(false)
          this.setReadout('Every bar is a count of the deliveries that landed in its range.')
        };

  public chartOptions: Partial<ChartOptions> = {
          series: this.HISTOGRAM_SERIES,
          chart: {
            id: 'explodeHist',
            type: 'histogram',
            height: 420,
            toolbar: {
              show: false,
            },
            animations: {
              chartTypeMorph: {
                speed: 900,
              },
            },
          },
          plotOptions: {
            histogram: {
              bins: 22,
            },
          },
          colors: ['#4e8cff'],
          legend: {
            show: false,
          },
          xaxis: {
            title: {
              text: 'Delivery time (minutes)',
            },
            labels: {
              formatter: (val) => {
                return Math.round(val)
              },
            },
          },
          yaxis: {
            title: {
              text: 'Deliveries',
            },
          },
        };
  ngAfterViewInit() {
    (window as any).ApexCharts.setLicense('APEX-eyJleHBpcnlEYXRlIjoiMjEyNi0wNy0wNCIsImlzc3VlRGF0ZSI6IjIwMjYtMDctMjgiLCJwbGFuIjoicHJlbWl1bSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiLCJsb2NhbGhvc3QiXSwic2lnIjoieVBmb1VCc0Z3TU9ZdUEyaEZkR0I2Y1FtZ0JITUtXcVdJSjB2NVRESXRZbFR3eDJMUmh6R2x0RUc3VXJ4X0s3b25ZMWRZb2Z2VGItN01ydFYyNDVyOWcifQ==');
    this.wireExplode(this.chart)

    function wireExplode(chart) {
            var buttons = [].slice.call(document.querySelectorAll('[data-explode]'))

            buttons.forEach(function (b) {
              b.addEventListener('click', () => {
                // The active view's button is a no-op: re-requesting the readings while
                // already exploded would ask rowSeries() of a unit chart, which has no
                // rows to hand back.
                if (b.className === 'on') return
                var explode = b.getAttribute('data-explode') === 'true'
                this.setActive(explode)

                if (explode) {
                  // The whole point: nothing about the sample is passed in here. The
                  // chart already knows which observations it counted into each bar, so
                  // rowSeries() returns one cluster per bar holding exactly those rows.
                  var rows = this.chart.rowSeries()
                  var total = rows.reduce(function (n, c) {
                    return n + c.data.length
                  }, 0)

                  // What comes back is ordinary series data, so it can be decorated.
                  // Colouring each bar's dots by how late that bar was keeps the
                  // distribution readable once the bars are gone: without this the blob
                  // is 640 identical dots and you cannot tell a quick delivery from a
                  // disastrous one.
                  rows.forEach(function (cluster, k) {
                    var color = this.rampColor(rows.length > 1 ? k / (rows.length - 1) : 0)
                    cluster.data.forEach(function (d) {
                      d.fillColor = color
                    })
                  })
                  this.chart.updateOptions({
                    chart: { type: 'unit' },
                    series: rows,
                    plotOptions: {
                      unit: {
                        // NOT 'columns'. That layout would stack each bin's dots back
                        // into a column the same height and place as the bar they left,
                        // so the objects would travel a few pixels and the whole thing
                        // would look like a redraw. 'packed' gathers them into one blob,
                        // which is a real journey.
                        layout: 'packed',
                        unitValue: 1,
                        size: 3,
                      },
                    },
                    legend: { show: false },
                  })
                  this.setReadout(
                    'One dot per delivery: <b>' +
                      total +
                      '</b> of them, ' +
                      'gathered out of <b>' +
                      rows.length +
                      '</b> bars.',
                  )
                } else {
                  this.chart.updateOptions({
                    chart: { type: 'histogram' },
                    series: this.HISTOGRAM_SERIES,
                    legend: { show: false },
                  })
                  this.setReadout(
                    'Every bar is a count of the deliveries that landed in its range.',
                  )
                }
              })
            })

            this.setActive(false)
            this.setReadout('Every bar is a count of the deliveries that landed in its range.')
          }
  }

  ngOnDestroy() {
    // no cleanup needed
  }
}