// Copyright 2022 The Fuchsia 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 { LogControl } from './log_control';
import { LogViewActions } from './log_view_actions';
import {LogRowData} from '../src/log_data';
import { State } from '../src/state';
import { LogList } from './log_list';
import {ffxLogToLogRowData} from '../src/ffxLogToLogRow';
import {LogViewOptions} from '../src/fields';

export const RESUMING_LOG_STREAMING_LOG = 'Resuming log streaming, press [pause icon] to pause.';
export const PAUSING_LOG_STREAMING_LOG = 'Playback has been paused, press [play icon] to resume.';

export type ExternalActionRequestEvent =
  | { type: 'pause-log-streaming' }
  | { type: 'clear-logs', untilTimestamp: number }
  | { type: 'resume-log-streaming' };

export class LoggingView extends EventTarget {
  private logActionContainer: HTMLDivElement;
  private logControl?: LogControl;
  private logList: LogList;
  private logListContainer: HTMLDivElement;
  private logViewActions: LogViewActions;

  public static readonly externalActionRequestEvent: string = 'external-action-request-event';

  constructor(
    private state: State,
    private root: HTMLElement,
    private options: LogViewOptions = {
      columnFormatter: (_fieldName, text) => text,
      showControls: true
    }) {
    super();
    this.logList = new LogList(state.currentFields, state.shouldWrapLogs,
      state.setHeaderWidth.bind(state), state.currentFilter, options);
    if (this.options.showControls) {
      this.logControl = new LogControl(this.state.currentFilterText);
      this.logControl.addEventListener(LogControl.filterChangeEvent, (e) => {
        const event = e as CustomEvent;
        const { filter, text } = event.detail;
        this.state.registerFilter(filter, text);
        this.logControl!.resultsMessage =
          filter.isEmpty() ? '' : `${this.logList.filterResultsCount} results`;
      });
    }

    this.state.addEventListener('filterChange', (e) => {
      const event = e as CustomEvent;
      this.logList.filterChangeHandler(event);
    });

    this.logViewActions = new LogViewActions({
      wrappingLogs: this.state.shouldWrapLogs,
      /**
       * TODO(fxbug.dev/109719): make this behavior persisted and automatic
       * with focus changes
       */
      playActive: true
    });
    this.logViewActions.addEventListener(LogViewActions.clearRequestedEvent, (e) => {
      const detail: ExternalActionRequestEvent =
        { type: 'clear-logs', untilTimestamp: this.logList.lastTimestamp };
      this.dispatchEvent(new CustomEvent(LoggingView.externalActionRequestEvent, { detail }));
      this.logList.reset();
    });
    this.logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
      const event = e as CustomEvent;
      const { wrapLogs } = event.detail;
      this.logList.logWrapping = wrapLogs;
      this.state.shouldWrapLogs = wrapLogs;
    });
    this.logViewActions.addEventListener(LogViewActions.playPauseChangeEvent, (e) => {
      const event = e as CustomEvent;
      const { playActive } = event.detail;
      this.onPlayPauseChangeEvent(playActive);
    });

    this.logActionContainer = document.createElement('div');
    this.logActionContainer.id = 'log-action-container';
    this.logListContainer = document.createElement('div');
    this.logListContainer.id = 'log-list-container';

    this.root.appendChild(this.logActionContainer);
    if (this.logControl) {this.logActionContainer.appendChild(this.logControl);}
    this.logActionContainer.appendChild(this.logViewActions);

    this.root.appendChild(this.logListContainer);
    this.logListContainer.appendChild(this.logList);
  }

  /**
   * Appends a log to the current list of logs
   */
  public addLog(log: LogRowData) {
    this.logList.addLog(log);
  }

  /**
   * Resets the state and contents of the webview to contain nothing.
   * The persistent state is maintained as that represents user selections.
   */
  public reset() {
    this.state.reset();
    this.logList.reset();
    this.logControl?.reset();
  }

  /**
   * Handles a play/pause event emitted by the log actions view.
   * @param playActive whether or not the streaming of logs is active
   */
  private onPlayPauseChangeEvent(playActive: boolean) {
    const detail: ExternalActionRequestEvent =
      playActive
        ? { type: 'resume-log-streaming' }
        : { type: 'pause-log-streaming' };
    this.dispatchEvent(new CustomEvent(LoggingView.externalActionRequestEvent, {
      detail,
    }));

    this.logList.addLog(ffxLogToLogRowData({
      data: {
        // eslint-disable-next-line @typescript-eslint/naming-convention
        ViewerEvent: playActive
          ? RESUMING_LOG_STREAMING_LOG
          : PAUSING_LOG_STREAMING_LOG
      },
      timestamp: Date.now(),
      version: 0
    })!
    );
  }
}