import { LitElement, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { IxMenu } from '@digital-realty/ix-menu';
import '@digital-realty/ix-menu/ix-menu.js';
import '@digital-realty/ix-menu/ix-menu-item.js';
import '@digital-realty/ix-icon-button/ix-icon-button.js';
import '@digital-realty/ix-progress/ix-progress.js';
import { IxGridViewStyles } from '../grid-view-styles.js';
import { IxGridDownloadMenuItemModel } from '../models/IxGridDownloadMenuItemModel.js';

@customElement('ix-grid-download-menu')
export class IxGridDownloadMenu extends LitElement {
  static readonly styles = [IxGridViewStyles];

  @query('#menu') downloadMenu!: IxMenu;

  @query('#anchor') downloadMenuAnchor!: HTMLElement;

  @property({ type: Array }) items: IxGridDownloadMenuItemModel[] = [];

  @property({ type: Boolean }) isDownloading = false;

  toggleMenu() {
    this.downloadMenu!.open = !this.downloadMenu!.open;
  }

  renderMenuItems() {
    if (this.items?.length === 0) {
      return html` <ix-menu-item
          @click=${() =>
            this.dispatchEvent(
              new CustomEvent('download', {
                detail: 'all',
                bubbles: true,
                composed: true,
              })
            )}
        >
          <div slot="headline">Download All Records</div>
        </ix-menu-item>
        <ix-menu-item
          @click=${() =>
            this.dispatchEvent(
              new CustomEvent('download', {
                detail: 'filter',
                bubbles: true,
                composed: true,
              })
            )}
        >
          <div slot="headline">Download Current Filter</div>
        </ix-menu-item>`;
    }

    return this.items
      .filter(x => !x.hidden)
      .map(
        m => html` <ix-menu-item
          .disabled=${m.disabled}
          @click=${() => m.onClick(m.name)}
        >
          <div slot="headline">${m.label}</div>
        </ix-menu-item>`
      );
  }

  render() {
    if (this.isDownloading) {
      return html`<ix-progress
        .indeterminate=${true}
        .linear=${false}
        style="--md-circular-progress-size: 1.75REM;
              text-align: center;"
      ></ix-progress>`;
    }

    return html` <div style="position: relative">
      <ix-icon-button id="anchor" @click=${this.toggleMenu}>
        <svg
          slot="default"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z"
            fill="#1456E0"
          />
        </svg>
      </ix-icon-button>
      <ix-menu id="menu" anchor="anchor" has-overflow>
        ${this.renderMenuItems()}
      </ix-menu>
    </div>`;
  }
}