/**
 * @module modules/pivot-query-sk
 * @description <h2><code>pivot-query-sk</code></h2>
 *
 * @evt pivot-changed - Emitted every time the control is changed by the user.
 * See PivotQueryChangedEventDetail.
 */
import { html, TemplateResult } from 'lit-html';
import { define } from '../../../elements-sk/modules/define';
import { MultiSelectSkSelectionChangedEventDetail } from '../../../elements-sk/modules/multi-select-sk/multi-select-sk';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { ParamSet, pivot } from '../json';
import '../../../elements-sk/modules/multi-select-sk';
import '../../../elements-sk/modules/select-sk';
import { operationDescriptions, validatePivotRequest } from '../pivotutil';

const sortedOps = Object.keys(
  operationDescriptions
).sort() as pivot.Operation[];

/** CustomEvent details sent when the control is changed by the user. */
export type PivotQueryChangedEventDetail = pivot.Request | null;

/** The name of the event we emit. */
export const PivotQueryChangedEventName = 'pivot-changed';

/**
 * Custom element that allows editing a pivot.Request.
 *
 * A ParamSet is also needed to list the allowable choices
 * for the pivot.Request.group_by.
 */
export class PivotQuerySk extends ElementSk {
  private _paramset: ParamSet = {};

  private _pivotRequest: pivot.Request | null = null;

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

  private static template = (ele: PivotQuerySk) => html`
    <label>
      <p>Which keys should traces be grouped by:</p>
      <multi-select-sk id="group_by" @selection-changed=${ele.groupByChanged}>
        ${ele.groupByOptions()}
      </multi-select-sk>
    </label>

    <label>
      <p>What operation should be applied:</p>
      <select @change=${ele.operationChanged}>
        ${ele.operationOptions()}
      </select>
    </label>

    <label>
      <p>Optional: Choose summary statistics to calculate for each group:</p>
      <multi-select-sk id="summary" @selection-changed=${ele.summaryChanged}>
        ${ele.summaryOptions()}
      </multi-select-sk>
    </label>
  `;

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

  private createDefaultPivotRequestIfNull(): void {
    if (this._pivotRequest === null) {
      this._pivotRequest = {
        group_by: [],
        operation: 'avg',
        summary: [],
      };
    }
  }

  private allGroupByOptions(): string[] {
    const psKeys = Object.keys(this._paramset);
    const selectedKeys = this._pivotRequest?.group_by || [];
    // An empty ParamSet could wipe out the users selection, which would be
    // unfortunate, so we always display the values in the current pivotRequest
    // so they don't get lost.
    //
    // Do this by concatenating psKeys and selectedKeys and then removing
    // duplicates.
    let last = '';
    return psKeys
      .concat(selectedKeys)
      .sort()
      .filter((key: string) => {
        if (key === last) {
          return false;
        }
        last = key;
        return true;
      });
  }

  private groupByOptions(): TemplateResult[] {
    const selectedKeys = this._pivotRequest?.group_by || [];
    const allOptions = this.allGroupByOptions();
    return allOptions.map(
      (key: string): TemplateResult =>
        html`<div ?selected=${selectedKeys.includes(key)}>${key}</div>`
    );
  }

  private operationOptions(): TemplateResult[] {
    return sortedOps.map(
      (key: pivot.Operation): TemplateResult =>
        html`<option
          value="${key}"
          .selected=${this._pivotRequest?.operation === key}>
          ${operationDescriptions[key]}
        </option>`
    );
  }

  private summaryOptions(): TemplateResult[] {
    const selections = this._pivotRequest?.summary || [];
    return sortedOps.map(
      (key: pivot.Operation): TemplateResult =>
        html`<div ?selected=${selections.includes(key)}>
          ${operationDescriptions[key]}
        </div>`
    );
  }

  private groupByChanged(
    e: CustomEvent<MultiSelectSkSelectionChangedEventDetail>
  ): void {
    this.createDefaultPivotRequestIfNull();
    const allOptions = this.allGroupByOptions();
    this._pivotRequest!.group_by = e.detail.selection.map(
      (index: number) => allOptions[index]
    );
    this.emitChangeEvent();
  }

  private operationChanged(e: Event & { target: HTMLSelectElement }): void {
    this.createDefaultPivotRequestIfNull();
    this._pivotRequest!.operation = sortedOps[e.target.selectedIndex];
    this.emitChangeEvent();
  }

  private summaryChanged(
    e: CustomEvent<MultiSelectSkSelectionChangedEventDetail>
  ): void {
    this.createDefaultPivotRequestIfNull();
    this._pivotRequest!.summary = e.detail.selection.map(
      (index: number) => sortedOps[index]
    );
    this.emitChangeEvent();
  }

  private emitChangeEvent(): void {
    this.dispatchEvent(
      new CustomEvent<PivotQueryChangedEventDetail>(
        PivotQueryChangedEventName,
        {
          detail: this.pivotRequest,
          bubbles: true,
        }
      )
    );
  }

  /** Returns null if the pivot.Request isn't valid. */
  public get pivotRequest(): pivot.Request | null {
    if (validatePivotRequest(this._pivotRequest)) {
      return null;
    }
    return this._pivotRequest;
  }

  public set pivotRequest(v: pivot.Request | null) {
    this._pivotRequest = v;
    this._render();
  }

  public get paramset(): ParamSet {
    return this._paramset;
  }

  public set paramset(v: ParamSet) {
    this._paramset = v;
    this._render();
  }
}

define('pivot-query-sk', PivotQuerySk);