/**
 * @fileoverview The bulk of the Metrics Analysis page of CT.
 */

import '../../../elements-sk/modules/icons/delete-icon-sk';
import '../../../elements-sk/modules/icons/cancel-icon-sk';
import '../../../elements-sk/modules/icons/check-circle-icon-sk';
import '../../../elements-sk/modules/icons/help-icon-sk';
import '../../../elements-sk/modules/toast-sk';
import '../suggest-input-sk';
import '../input-sk';
import '../patch-sk';
import '../task-repeater-sk';
import '../task-priority-sk';

import { html } from 'lit-html';
import { $$, $ } from '../../../infra-sk/modules/dom';
import { define } from '../../../elements-sk/modules/define';
import '../../../elements-sk/modules/select-sk';
import { errorMessage } from '../../../elements-sk/modules/errorMessage';
import { jsonOrThrow } from '../../../infra-sk/modules/jsonOrThrow';

import { ElementSk } from '../../../infra-sk/modules/ElementSk';

import { InputSk } from '../input-sk/input-sk';
import { PatchSk } from '../patch-sk/patch-sk';
import { TaskPrioritySk } from '../task-priority-sk/task-priority-sk';
import { TaskRepeaterSk } from '../task-repeater-sk/task-repeater-sk';
import {
  combineClDescriptions,
  moreThanThreeActiveTasksChecker,
} from '../ctfe_utils';
import { MetricsAnalysisAddTaskVars, EditTaskRequest } from '../json';

interface ExpandableTextArea extends InputSk {
  open: boolean;
}

export class MetricsAnalysisSk extends ElementSk {
  private _triggeringTask: boolean = false;

  private _moreThanThreeActiveTasks = moreThanThreeActiveTasksChecker();

  // Variables that represent UI elements.
  private metricName!: InputSk;

  private analysisTaskId!: InputSk;

  private customTraces!: ExpandableTextArea;

  private benchmarkArgs!: InputSk;

  private valueColumnName!: InputSk;

  private description!: InputSk;

  private chromiumPatch!: PatchSk;

  private catapultPatch!: PatchSk;

  private repeatAfterDays!: TaskRepeaterSk;

  private taskPriority!: TaskPrioritySk;

  private ccList!: InputSk;

  constructor() {
    super(MetricsAnalysisSk.template);
  }

  private static template = (el: MetricsAnalysisSk) => html`
    <table class="options">
      <tr>
        <td>Metric Name</td>
        <td>
          <input-sk
            id="metric_name"
            label="The metric to parse the provided traces with. Eg: loadingMetric"
            class="medium-field"></input-sk>
        </td>
      </tr>
      <tr>
        <td>Source of Traces</td>
        <td>
          <input-sk
            id="analysis_task_id"
            label="Analysis Task Id"
            class="medium-field"></input-sk>
          <expandable-textarea-sk
            id="custom_traces"
            minRows="5"
            displaytext="Specify custom list of traces"
            placeholder="Eg: trace1,trace2,trace3"
            @click=${el._toggleAnalysisTaskId}>
          </expandable-textarea-sk>
        </td>
      </tr>
      <tr>
        <td>Benchmark Arguments</td>
        <td>
          <input-sk
            value="--output-format=csv"
            id="benchmark_args"
            class="long-field"></input-sk>
          <span class="smaller-font"
            >These will be the arguments to the analysis_metrics_ct
            benchmark.</span
          ><br />
          <span class="smaller-font"
            ><b>Note:</b> Use --run-benchmark-timeout=[secs] to specify the
            timeout of the run_benchmark script. 300 is the default.</span
          ><br />
          <span class="smaller-font"
            ><b>Note:</b> Use --max-pages-per-bot=[num] to specify the number of
            pages to run per bot. 50 is the default.</span
          >
        </td>
      </tr>
      <tr>
        <td>Field Value Column Name</td>
        <td>
          <input-sk
            value="avg"
            id="value_column_name"
            class="medium-field"></input-sk>
          <span class="smaller-font"
            >Which column's entries to use as field values.</span
          >
        </td>
      </tr>
      <tr>
        <td>
          Chromium Git patch (optional)<br />
          Applied to Chromium ToT<br />
        </td>
        <td>
          <patch-sk
            id="chromium_patch"
            patchType="chromium"
            @cl-description-changed=${el._patchChanged}>
          </patch-sk>
        </td>
      </tr>
      <tr>
        <td>
          Catapult Git patch (optional)<br />
          Applied to Catapult Rev in
          <a
            href="https://chromium.googlesource.com/chromium/src/+show/HEAD/DEPS"
            >DEPS</a
          >
        </td>
        <td>
          <patch-sk
            id="catapult_patch"
            patchType="catapult"
            @cl-description-changed=${el._patchChanged}>
          </patch-sk>
        </td>
      </tr>
      <tr>
        <td>Repeat this task</td>
        <td>
          <task-repeater-sk id="repeat_after_days"></task-repeater-sk>
        </td>
      </tr>
      <tr>
        <td>Task Priority</td>
        <td>
          <task-priority-sk id="task_priority"></task-priority-sk>
        </td>
      </tr>
      <tr>
        <td>
          Notifications CC list (optional)<br />
          Email will be sent by ct@skia.org
        </td>
        <td>
          <input-sk
            value=""
            id="cc_list"
            label="email1,email2,email3"
            class="long-field"></input-sk>
        </td>
      </tr>
      <tr>
        <td>Description</td>
        <td>
          <input-sk
            value=""
            id="description"
            label="Description is required"
            class="long-field"></input-sk>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="center">
          <div class="triggering-spinner">
            <spinner-sk
              .active=${el._triggeringTask}
              alt="Trigger task"></spinner-sk>
          </div>
          <button
            id="submit"
            ?disabled=${el._triggeringTask}
            @click=${el._validateTask}>
            Queue Task
          </button>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="center">
          <button id="view_history" @click=${el._gotoRunsHistory}>
            View runs history
          </button>
        </td>
      </tr>
    </table>
  `;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();

    this.metricName = $$<InputSk>('#metric_name', this)!;
    this.analysisTaskId = $$<InputSk>('#analysis_task_id', this)!;
    this.customTraces = $$<ExpandableTextArea>('#custom_traces', this)!;
    this.benchmarkArgs = $$<InputSk>('#benchmark_args', this)!;
    this.valueColumnName = $$<InputSk>('#value_column_name', this)!;
    this.description = $$<InputSk>('#description', this)!;
    this.chromiumPatch = $$<PatchSk>('#chromium_patch', this)!;
    this.catapultPatch = $$<PatchSk>('#catapult_patch', this)!;
    this.repeatAfterDays = $$<TaskRepeaterSk>('#repeat_after_days', this)!;
    this.taskPriority = $$<TaskPrioritySk>('#task_priority', this)!;
    this.ccList = $$<InputSk>('#cc_list', this)!;

    // If template_id is specified then load the template.
    const params = new URLSearchParams(window.location.search);
    const template_id = params.get('template_id');
    if (template_id) {
      this.handleTemplateID(template_id);
    }
  }

  handleTemplateID(template_id: string): void {
    this.dispatchEvent(new CustomEvent('begin-task', { bubbles: true }));
    const req: EditTaskRequest = { id: +template_id };
    fetch('/_/edit_metrics_analysis_task', {
      method: 'POST',
      body: JSON.stringify(req),
    })
      .then(jsonOrThrow)
      .then((json: MetricsAnalysisAddTaskVars) => {
        // Populate all fields from the EditTaskRequest.
        this.metricName.value = json.metric_name;
        this.analysisTaskId.value = json.analysis_task_id;
        this.benchmarkArgs.value = json.benchmark_args;
        this.valueColumnName.value = json.value_column_name;
        this.description.value = json.desc;

        // If custom webpages are specified then populate the field and expand it.
        if (json.custom_traces) {
          this.customTraces.value = json.custom_traces;
          if (!this.customTraces.open) {
            ($$('button', this.customTraces) as HTMLElement).click();
          }
        }

        // Patches.
        if (json.chromium_patch) {
          this.chromiumPatch.patch = json.chromium_patch;
          this.chromiumPatch.expandTextArea();
        }
        if (json.catapult_patch) {
          this.catapultPatch.patch = json.catapult_patch;
          this.catapultPatch.expandTextArea();
        }

        this.repeatAfterDays.frequency = json.repeat_after_days;
        this.taskPriority.priority = json.task_priority;
        if (json.cc_list) {
          this.ccList.value = json.cc_list.join(',');
        }

        // Focus and then blur the benchmark name so that we go back to the
        // top of the page.
        this.metricName.querySelector('input')!.focus();
        this.metricName.querySelector('input')!.blur();
      })
      .catch(errorMessage)
      .finally(() => {
        this._render();
        this.dispatchEvent(new CustomEvent('end-task', { bubbles: true }));
      });
  }

  _toggleAnalysisTaskId(): void {
    if (this.customTraces.open === this.analysisTaskId.hidden) {
      // This click wasn't toggling the expandable textarea.
      return;
    }
    this.analysisTaskId.hidden = this.customTraces.open;
    // We assume if someone opens the custom traces window they will be using
    // custom traces, and if they close it, they won't be.
    if (this.customTraces.open) {
      this.customTraces.value = '';
    } else {
      this.customTraces.value = '';
    }
    this._render();
  }

  _patchChanged(): void {
    this.description.value = combineClDescriptions(
      $('patch-sk', this).map((patch) => (patch as PatchSk).clDescription)
    );
  }

  _validateTask(): void {
    if (!$('patch-sk', this).every((patch) => (patch as PatchSk).validate())) {
      return;
    }
    if (!this.metricName.value) {
      errorMessage('Please specify a metric name');
      this.metricName.focus();
      return;
    }
    if (!this.analysisTaskId.value && !this.customTraces.value) {
      errorMessage('Please specify an analysis task id or custom traces');
      this.analysisTaskId.focus();
      return;
    }
    if (!this.description.value) {
      errorMessage('Please specify a description');
      this.description.focus();
      return;
    }
    if (this._moreThanThreeActiveTasks()) {
      return;
    }
    const confirmed = window.confirm('Proceed with queueing task?');
    if (confirmed) {
      this._queueTask();
    }
  }

  _queueTask(): void {
    this._triggeringTask = true;
    const params = {} as MetricsAnalysisAddTaskVars;
    params.metric_name = this.metricName.value;
    params.analysis_task_id = this.analysisTaskId.value;
    params.custom_traces = this.customTraces.value;
    params.benchmark_args = this.benchmarkArgs.value;
    params.value_column_name = this.valueColumnName.value;
    params.desc = this.description.value;
    params.chromium_patch = this.chromiumPatch.patch;
    params.catapult_patch = this.catapultPatch.patch;
    params.repeat_after_days = this.repeatAfterDays.frequency;
    params.task_priority = this.taskPriority.priority;
    if (this.ccList.value) {
      params.cc_list = this.ccList.value.split(',');
    }

    fetch('/_/add_metrics_analysis_task', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params),
    })
      .then(() => this._gotoRunsHistory())
      .catch((e) => {
        this._triggeringTask = false;
        errorMessage(e);
      });
  }

  _gotoRunsHistory(): void {
    window.location.href = '/metrics_analysis_runs/';
  }
}

define('metrics-analysis-sk', MetricsAnalysisSk);