import { html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import NileElement from '../../internal/nile-element';

/**
 * Find & replace bar pinned to the top-right of the editor. Emits:
 *  - `wysiwyg-find`         detail: { query }
 *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }
 *  - `wysiwyg-replace`      detail: { value }
 *  - `wysiwyg-replace-all`  detail: { value }
 *  - `wysiwyg-find-close`
 */
@customElement('nile-wysiwyg-find-bar')
export class NileWysiwygFindBar extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  @property({ type: Number }) matchCount = 0;

  @property({ type: Number }) activeIndex = 0;

  @query('.find-bar__query') queryInput?: HTMLInputElement;

  @query('.find-bar__replace') replaceInput?: HTMLInputElement;

  public static get styles(): CSSResultArray {
    return [
      css`
        :host {
          font-family: var(
            --nile-font-family-sans-serif,
            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
          );
          position: absolute;
          top: 8px;
          right: 8px;
          z-index: 25;
          display: none;
        }

        :host([open]) {
          display: block;
        }

        .find-bar {
          display: grid;
          grid-template-columns: auto auto auto auto;
          align-items: center;
          gap: 6px;
          padding: 8px;
          background: var(--nile-wysiwyg-popover-bg, #ffffff);
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: 8px;
          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
          font-size: 13px;
        }

        input {
          font: inherit;
          font-size: 13px;
          width: 160px;
          padding: 4px 8px;
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: 6px;
          outline: none;
        }

        input:focus {
          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
        }

        .count {
          min-width: 42px;
          text-align: center;
          color: var(--nile-colors-neutral-500, #98a2b3);
          font-variant-numeric: tabular-nums;
        }

        button {
          font: inherit;
          font-size: 12px;
          padding: 4px 8px;
          border: none;
          border-radius: 5px;
          background: transparent;
          cursor: pointer;
          color: var(--nile-colors-neutral-700, #344054);
        }

        button:hover {
          background: var(--nile-colors-neutral-100, #f2f4f7);
        }
      `,
    ];
  }

  public focusInput(): void {
    this.updateComplete.then(() => {
      this.queryInput?.focus();
      this.queryInput?.select();
    });
  }

  private handleKeydown(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      event.stopPropagation();
      this.emit('wysiwyg-find-close');
    } else if (event.key === 'Enter' && event.target === this.queryInput) {
      event.preventDefault();
      this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });
    }
  }

  public render(): TemplateResult {
    const count = this.matchCount
      ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`
      : '0/0';
    return html`
      <div class="find-bar" part="find-bar" @keydown=${this.handleKeydown}>
        <input
          class="find-bar__query"
          type="text"
          placeholder="Find"
          aria-label="Find"
          @input=${(e: Event) =>
            this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}
        />
        <span class="count">${count}</span>
        <button
          type="button"
          title="Previous match"
          @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}
        >
          ↑
        </button>
        <button
          type="button"
          title="Next match"
          @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}
        >
          ↓
        </button>
        <input
          class="find-bar__replace"
          type="text"
          placeholder="Replace with"
          aria-label="Replace with"
        />
        <button
          type="button"
          @click=${() =>
            this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}
        >
          Replace
        </button>
        <button
          type="button"
          @click=${() =>
            this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}
        >
          All
        </button>
        <button type="button" title="Close (Esc)" @click=${() => this.emit('wysiwyg-find-close')}>
          ✕
        </button>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-find-bar': NileWysiwygFindBar;
  }
}