/**
 * @module module/leasing-task-sk
 * @description <h2><code>leasing-task-sk</code></h2>
 *
 * <p>
 *   Displays information about a single leasing task.
 * </p>
 *
 */

import { define } from 'elements-sk/define';
import { html, TemplateResult } from 'lit-html';
import { $$ } from 'common-sk/modules/dom';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';

import 'elements-sk/error-toast-sk';
import 'elements-sk/icon/folder-icon-sk';
import 'elements-sk/icon/gesture-icon-sk';
import 'elements-sk/icon/help-icon-sk';
import 'elements-sk/icon/home-icon-sk';
import 'elements-sk/icon/star-icon-sk';
import 'elements-sk/nav-button-sk';
import 'elements-sk/nav-links-sk';
import { device, getAKAStr, doImpl } from '../leasing';

import '../../../infra-sk/modules/login-sk';

import { Task, ExpireTaskRequest, ExtendTaskRequest } from '../json';

function displayTaskStatus(task: Task): string {
  if (task.done) {
    return 'Completed';
  }
  return 'Still Running';
}

function formatTimestamp(timestamp: string): string {
  if (!timestamp) {
    return timestamp;
  }
  const d = new Date(timestamp);
  return d.toLocaleString();
}

function displayLeaseStartTime(task: Task): string {
  return displayLeaseTime(task.swarmingTaskState, task.leaseStartTime);
}

function displayLeaseEndTime(task: Task): string {
  return displayLeaseTime(task.swarmingTaskState, task.leaseEndTime);
}

function displayLeaseTime(taskState: string, taskTime: string): string {
  if (taskState === 'PENDING') {
    return 'N/A';
  }
  return formatTimestamp(taskTime);
}

function displayDimensions(task: Task): TemplateResult {
  let dims = task.osType;
  if (task.deviceType !== '') {
    dims += ` - ${device(task.deviceType)}${getAKAStr(task.deviceType)}`;
  }
  return html`
    <br/>
    Dimensions: ${dims}`;
}

function displayBotId(task: Task): TemplateResult {
  if (!task.botId) {
    return html``;
  }
  return html`
    <br/>
    Bot Id: <a href="https://${task.swarmingServer}/bot?id=${task.botId}" target="_blank">${task.botId}</a
  `;
}

function displaySwarmingTaskForIsolates(task: Task): TemplateResult {
  if (!task.taskIdForIsolates) {
    return html``;
  }
  return html`
    <br/>
    Task for Isolates: <a href="https://${task.swarmingServer}/task?id=${task.taskIdForIsolates}" target="_blank">Link</a
  `;
}

function displaySwarmingTask(task: Task): TemplateResult {
  if (!task.swarmingTaskId) {
    return html`Processing`;
  }
  return html`
    <a href="https://${task.swarmingServer}/task?id=${task.swarmingTaskId}" target="_blank">Link</a
  `;
}

export class LeasingTaskSk extends ElementSk {
  private leasingTask = {} as Task;

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

  private static template = (ele: LeasingTaskSk) => html`
  <table class="tasktable">
    <col width ="33%">
    <col width ="33%">
    <col width ="33%">

    <tr class="headers">
       <td colspan=2>
         Task - ${ele.leasingTask.description} - ${ele.leasingTask.requester} - ${displayTaskStatus(ele.leasingTask)}
       </td>
    </tr>

    <tr>
      <td>
        Created: ${formatTimestamp(ele.leasingTask.created)}
      </td>
      <td>
        Lease Start Time: ${displayLeaseStartTime(ele.leasingTask)}
        <br/>
        Lease End Time: ${displayLeaseEndTime(ele.leasingTask)}
      </td>
    </tr>

    <tr>
      <td>
        Pool: ${ele.leasingTask.pool}
        ${displayDimensions(ele.leasingTask)}
        ${displayBotId(ele.leasingTask)}
        ${displaySwarmingTaskForIsolates(ele.leasingTask)}
      </td>
      <td>
        Task Log:${displaySwarmingTask(ele.leasingTask)}
        <br/>
        Task Status: ${ele.leasingTask.swarmingTaskState}
      </td>
    </tr>

    ${LeasingTaskSk.displayLeaseButtonRow(ele)}
  </table>
`;

  private static displayLeaseButtonRow(ele: LeasingTaskSk) {
    const task = ele.leasingTask;
    if (task.done || task.swarmingTaskState === 'PENDING') {
      return '';
    }
    return html`
  <tr>
    <td>
      <select id="duration">
        <option value="1" title="1 Hour">1hr</option>
        <option value="2" title="2 Hours">2hr</option>
        <option value="6" title="6 Hours">6hr</option>
        <option value="23" title="23 Hours">23hr</option>
      </select>
      <button raised @click=${ele.onExtend}>Extend Lease</button>
    </td>
    <td>
      <button raised @click=${ele.onExpire}>Expire Lease</button>
    </td>
  </tr>
`;
  }

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

  disconnectedCallback(): void {
    super.disconnectedCallback();
  }

  private onExtend(): void {
    const confirmed = window.confirm('Proceed with extending leasing task?');
    if (!confirmed) {
      return;
    }
    const detail: ExtendTaskRequest = {
      task: this.leasingTask.datastoreId,
      duration: parseInt(($$('#duration', this) as HTMLInputElement)!.value, 10),
    };
    doImpl('/_/extend_leasing_task', detail, () => {
      window.location.href = '/my_leases';
    });
  }

  private onExpire(): void {
    const confirmed = window.confirm('Proceed with expiring leasing task?');
    if (!confirmed) {
      return;
    }
    const detail: ExpireTaskRequest = {
      task: this.leasingTask.datastoreId,
    };
    doImpl('/_/expire_leasing_task', detail, () => {
      window.location.href = '/my_leases';
    });
  }

  /** @prop task {Task} Leasing task object. */
  get task(): Task { return this.leasingTask; }

  set task(val: Task) {
    this.leasingTask = val;
    this._render();
  }
}

define('leasing-task-sk', LeasingTaskSk);