// Copyright 2022 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {Timeline} from '../../timeline.mjs';
import {ToolTipEvent} from '../events.mjs';
import {arrayEquals, CSSColor, DOM, formatDurationMicros, SVG, V8CustomElement} from '../helper.mjs';

/** @template T */
export class Track {
  static continuous(array, color) {
    return new this(array, color, true);
  }

  static discrete(array, color) {
    return new this(array, color, false);
  }

  /** @param {T[]} logEntries */
  constructor(logEntries, color, isContinuous) {
    /** @type {Set<T>} */
    this.logEntries = new Set(logEntries);
    this.color = color;
    /** @type {bool} */
    this.isContinuous = isContinuous;
  }

  isEmpty() {
    return this.logEntries.size == 0;
  }

  /** @param {T} logEntry */
  hasEntry(logEntry) {
    return this.logEntries.has(logEntry);
  }

  static compare(left, right) {
    return left.equals(right);
  }

  equals(other) {
    if (!arrayEquals(
            Array.from(this.logEntries), Array.from(other.logEntries))) {
      return false;
    }
    if (this.color != other.color) return false;
    if (this.isContinuous != other.isContinuous) return false;
    return true;
  }
}

const kHorizontalPixels = 800;
const kMarginHeight = 5;
const kHeight = 40;

DOM.defineCustomElement('view/timeline/timeline-overview',
                        (templateText) =>
                            /** @template T */
                        class TimelineOverview extends V8CustomElement {
  /** @type {Timeline<T>} */
  _timeline;
  /** @type {Track[]} */
  _tracks = [];
  _timeToPixel = 1;
  /** @type {{entry:T, track:Track} => number} */
  _countCallback = (entry, track) => track.hasEntry(entry);

  constructor() {
    super(templateText);
    this._indicatorNode = this.$('#indicator');
    this._selectionNode = this.$('#selection');
    this._contentNode = this.$('#content');
    this._svgNode = this.$('#svg');
    this._svgNode.onmousemove = this._handleMouseMove.bind(this);
  }

  /**
   * @param {Timeline<T>} timeline
   */
  set timeline(timeline) {
    this._timeline = timeline;
    this._timeToPixel = kHorizontalPixels / this._timeline.duration();
  }

  /**
   * @param {Track[]} tracks
   */
  set tracks(tracks) {
    // TODO(cbruni): Allow updating the selection time-range independently from
    // the data.
    // if (arrayEquals(this._tracks, tracks, Track.compare)) return;
    this._tracks = tracks;
    this.requestUpdate();
  }

  /** @param {{entry:T, track:Track} => number} callback*/
  set countCallback(callback) {
    this._countCallback = callback;
  }

  _handleMouseMove(e) {
    const externalPixelToTime =
        this._timeline.duration() / this._svgNode.getBoundingClientRect().width;
    const timeToInternalPixel = kHorizontalPixels / this._timeline.duration();
    const xPos = e.offsetX;
    const timeMicros = xPos * externalPixelToTime;
    const maxTimeDistance = 2 * externalPixelToTime;
    this._setIndicatorPosition(timeMicros * timeToInternalPixel);
    let toolTipContent = this._findLogEntryAtTime(timeMicros, maxTimeDistance);
    if (!toolTipContent) {
      toolTipContent = `Time ${formatDurationMicros(timeMicros)}`;
    }
    this.dispatchEvent(
        new ToolTipEvent(toolTipContent, this._indicatorNode, e.ctrlKey));
  }

  _findLogEntryAtTime(time, maxTimeDistance) {
    const minTime = time - maxTimeDistance;
    const maxTime = time + maxTimeDistance;
    for (let track of this._tracks) {
      for (let entry of track.logEntries) {
        if (minTime <= entry.time && entry.time <= maxTime) return entry;
      }
    }
  }

  _setIndicatorPosition(x) {
    this._indicatorNode.setAttribute('x1', x);
    this._indicatorNode.setAttribute('x2', x);
  }

  _update() {
    const fragment = new DocumentFragment();
    this._tracks.forEach((track, index) => {
      if (!track.isEmpty()) {
        fragment.appendChild(this._renderTrack(track, index));
      }
    });
    DOM.removeAllChildren(this._contentNode);
    this._contentNode.appendChild(fragment);
    this._setIndicatorPosition(-10);
    this._updateSelection();
  }

  _renderTrack(track, index) {
    if (track.isContinuous) return this._renderContinuousTrack(track, index);
    return this._renderDiscreteTrack(track, index);
  }

  _renderContinuousTrack(track, index) {
    const freq = new Frequency(this._timeline);
    freq.collect(track, this._countCallback);
    const path = SVG.path('continuousTrack');
    path.setAttribute('d', freq.toSVG(kHeight));
    path.setAttribute('fill', track.color);
    if (index != 0) path.setAttribute('mask', `url(#mask${index})`)
      return path;
  }

  _renderDiscreteTrack(track) {
    const group = SVG.g();
    for (let entry of track.logEntries) {
      const x = entry.time * this._timeToPixel;
      const kWidth = 2;
      const rect = SVG.rect('marker');
      rect.setAttribute('x', x - (kWidth / 2));
      rect.setAttribute('fill', track.color);
      rect.data = entry;
      group.appendChild(rect);
    }
    return group;
  }

  _updateSelection() {
    let startTime = -10;
    let duration = 0;
    if (this._timeline) {
      startTime = this._timeline.selectionOrSelf.startTime;
      duration = this._timeline.selectionOrSelf.duration();
    }
    this._selectionNode.setAttribute('x', startTime * this._timeToPixel);
    this._selectionNode.setAttribute('width', duration * this._timeToPixel);
  }
});

const kernel = smoothingKernel(50);
function smoothingKernel(size) {
  const kernel = new Float32Array(size);
  const mid = (size - 1) / 2;
  const stddev = size / 10;
  for (let i = mid; i < size; i++) {
    const x = i - (mid | 0);
    const value =
        Math.exp(-(x ** 2 / 2 / stddev)) / (stddev * Math.sqrt(2 * Math.PI));
    kernel[Math.ceil(x + mid)] = value;
    kernel[Math.floor(mid - x)] = value;
  }
  return kernel;
}

class Frequency {
  constructor(timeline) {
    this._size = kHorizontalPixels;
    this._timeline = timeline;
    this._data = new Int16Array(this._size + kernel.length);
    this._max = undefined;
    this._smoothenedData = undefined;
  }

  collect(track, sumFn) {
    const kernelRadius = (kernel.length / 2) | 0;
    let count = 0;
    let dataIndex = kernelRadius;
    const timeDelta = this._timeline.duration() / this._size;
    let nextTime = this._timeline.startTime + timeDelta;
    const values = this._timeline.values;
    const length = values.length;
    let i = 0;
    while (i < length && dataIndex < this._data.length) {
      const tick = values[i];
      if (tick.time < nextTime) {
        count += sumFn(tick, track);
        i++;
      } else {
        this._data[dataIndex] = count;
        nextTime += timeDelta;
        dataIndex++;
        count = 0;
      }
    }
    this._data[dataIndex] = count;
  }

  max() {
    if (this._max !== undefined) return this._max;
    let max = 0;
    this._smoothenedData = new Float32Array(this._size);
    for (let start = 0; start < this._size; start++) {
      let value = 0;
      for (let i = 0; i < kernel.length; i++) {
        value += this._data[start + i] * kernel[i];
      }
      this._smoothenedData[start] = value;
      max = Math.max(max, value);
    }
    this._max = max;
    return this._max;
  }

  toSVG(height) {
    const vScale = height / this.max();
    const initialY = height;
    const buffer = [
      'M 0',
      initialY,
    ];
    let prevY = initialY;
    let usedPrevY = false;
    for (let i = 0; i < this._size; i++) {
      const y = height - (this._smoothenedData[i] * vScale) | 0;
      if (y == prevY) {
        usedPrevY = false;
        continue;
      }
      if (!usedPrevY) buffer.push('L', i - 1, prevY);
      buffer.push('L', i, y);
      prevY = y;
      usedPrevY = true;
    }
    if (!usedPrevY) buffer.push('L', this._size - 1, prevY);
    buffer.push('L', this._size - 1, initialY);
    buffer.push('Z');
    return buffer.join(' ');
  }
}