/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import '../../shared/gr-dialog/gr-dialog';
import '../../shared/gr-list-view/gr-list-view';
import '../gr-create-group-dialog/gr-create-group-dialog';
import {GroupId, GroupInfo, GroupName} from '../../../types/common';
import {GrCreateGroupDialog} from '../gr-create-group-dialog/gr-create-group-dialog';
import {fireTitleChange} from '../../../utils/event-util';
import {getAppContext} from '../../../services/app-context';
import {SHOWN_ITEMS_COUNT} from '../../../constants/constants';
import {tableStyles} from '../../../styles/gr-table-styles';
import {sharedStyles} from '../../../styles/shared-styles';
import {LitElement, PropertyValues, css, html} from 'lit';
import {customElement, query, property, state} from 'lit/decorators.js';
import {assertIsDefined} from '../../../utils/common-util';
import {AdminViewState} from '../../../models/views/admin';
import {createGroupUrl} from '../../../models/views/group';
import {whenVisible} from '../../../utils/dom-util';
import {modalStyles} from '../../../styles/gr-modal-styles';

declare global {
  interface HTMLElementTagNameMap {
    'gr-admin-group-list': GrAdminGroupList;
  }
}

@customElement('gr-admin-group-list')
export class GrAdminGroupList extends LitElement {
  readonly path = '/admin/groups';

  @query('#createModal') private createModal?: HTMLDialogElement;

  @query('#createNewModal') private createNewModal?: GrCreateGroupDialog;

  @property({type: Object})
  params?: AdminViewState;

  /**
   * Offset of currently visible query results.
   */
  @state() private offset = 0;

  @state() private hasNewGroupName = false;

  @state() private createNewCapability = false;

  // private but used in test
  @state() groups: GroupInfo[] = [];

  @state() private groupsPerPage = 25;

  // private but used in test
  @state() loading = true;

  @state() private filter = '';

  private readonly restApiService = getAppContext().restApiService;

  override connectedCallback() {
    super.connectedCallback();
    this.getCreateGroupCapability();
    fireTitleChange(this, 'Groups');
  }

  static override get styles() {
    return [
      tableStyles,
      sharedStyles,
      modalStyles,
      css`
        gr-list-view {
          --generic-list-description-width: 70%;
        }
      `,
    ];
  }

  override render() {
    return html`
      <gr-list-view
        .createNew=${this.createNewCapability}
        .filter=${this.filter}
        .items=${this.groups}
        .itemsPerPage=${this.groupsPerPage}
        .loading=${this.loading}
        .offset=${this.offset}
        .path=${this.path}
        @create-clicked=${() => this.handleCreateClicked()}
      >
        <table id="list" class="genericList">
          <tbody>
            <tr class="headerRow">
              <th class="name topHeader">Group Name</th>
              <th class="description topHeader">Group Description</th>
              <th class="visibleToAll topHeader">Visible To All</th>
            </tr>
            <tr
              id="loading"
              class="loadingMsg ${this.loading ? 'loading' : ''}"
            >
              <td>Loading...</td>
            </tr>
          </tbody>
          <tbody class=${this.loading ? 'loading' : ''}>
            ${this.groups
              .slice(0, SHOWN_ITEMS_COUNT)
              .map(group => this.renderGroupList(group))}
          </tbody>
        </table>
      </gr-list-view>
      <dialog id="createModal" tabindex="-1">
        <gr-dialog
          id="createDialog"
          class="confirmDialog"
          ?disabled=${!this.hasNewGroupName}
          confirm-label="Create"
          confirm-on-enter
          @confirm=${() => this.handleCreateGroup()}
          @cancel=${() => this.handleCloseCreate()}
        >
          <div class="header" slot="header">Create Group</div>
          <div class="main" slot="main">
            <gr-create-group-dialog
              id="createNewModal"
              @has-new-group-name=${this.handleHasNewGroupName}
            ></gr-create-group-dialog>
          </div>
        </gr-dialog>
      </dialog>
    `;
  }

  private renderGroupList(group: GroupInfo) {
    return html`
      <tr class="table">
        <td class="name">
          <a href=${this.computeGroupUrl(group.id)}>${group.name}</a>
        </td>
        <td class="description">${group.description}</td>
        <td class="visibleToAll">
          ${group.options?.visible_to_all === true ? 'Y' : 'N'}
        </td>
      </tr>
    `;
  }

  override willUpdate(changedProperties: PropertyValues) {
    if (changedProperties.has('params')) {
      this.paramsChanged();
    }
  }

  // private but used in test
  paramsChanged() {
    this.filter = this.params?.filter ?? '';
    this.offset = Number(this.params?.offset ?? 0);
    this.maybeOpenCreateModal(this.params);

    return this.getGroups(this.filter, this.groupsPerPage, this.offset);
  }

  /**
   * Opens the create overlay if the route has a hash 'create'
   *
   * private but used in test
   */
  maybeOpenCreateModal(params?: AdminViewState) {
    if (params?.openCreateModal) {
      assertIsDefined(this.createModal, 'createModal');
      this.createModal.showModal();
    }
  }

  /**
   * Generates groups link (/admin/groups/<uuid>)
   *
   * private but used in test
   */
  computeGroupUrl(encodedId: string) {
    const groupId = decodeURIComponent(encodedId) as GroupId;
    return createGroupUrl({groupId});
  }

  private getCreateGroupCapability() {
    return this.restApiService.getAccount().then(account => {
      if (!account) return;
      return this.restApiService
        .getAccountCapabilities(['createGroup'])
        .then(capabilities => {
          if (capabilities?.createGroup) {
            this.createNewCapability = true;
          }
        });
    });
  }

  private getGroups(filter: string, groupsPerPage: number, offset?: number) {
    this.groups = [];
    this.loading = true;
    return this.restApiService
      .getGroups(filter, groupsPerPage, offset)
      .then(groups => {
        if (!groups) return;
        this.groups = Object.keys(groups).map(key => {
          const group = groups[key];
          group.name = key as GroupName;
          return group;
        });
      })
      .finally(() => {
        this.loading = false;
      });
  }

  private refreshGroupsList() {
    this.restApiService.invalidateGroupsCache();
    return this.getGroups(this.filter, this.groupsPerPage, this.offset);
  }

  // private but used in test
  handleCreateGroup() {
    assertIsDefined(this.createNewModal, 'createNewModal');
    this.createNewModal.handleCreateGroup().then(() => {
      this.refreshGroupsList();
    });
  }

  // private but used in test
  handleCloseCreate() {
    assertIsDefined(this.createModal, 'createModal');
    this.createModal.close();
  }

  // private but used in test
  handleCreateClicked() {
    assertIsDefined(this.createModal, 'createModal');
    this.createModal.showModal();
    whenVisible(this.createModal, () => {
      assertIsDefined(this.createNewModal, 'createNewModal');
      this.createNewModal.focus();
    });
  }

  private handleHasNewGroupName() {
    assertIsDefined(this.createNewModal, 'createNewModal');
    this.hasNewGroupName = !!this.createNewModal.name;
  }
}