import { html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../../internal/nile-element';
import { CODE_LANGUAGES } from '../engine/plugins/code-highlight';

/**
 * Compact floating language picker shown while the cursor is inside a code
 * block. Selection dispatches `wysiwyg-command` with setCodeBlockLanguage.
 */
@customElement('nile-wysiwyg-code-menu')
export class NileWysiwygCodeMenu extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  /** Current language attr ('' = auto, null treated as ''). */
  @property({ type: String }) language: string | null = null;

  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;
          z-index: 15;
          display: none;
        }

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

        .menu {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 4px 4px 4px 10px;
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: 8px;
          background: var(--nile-colors-white-base, #ffffff);
          box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
        }

        .label {
          font-size: 12px;
          color: var(--nile-colors-neutral-500, #98a2b3);
          white-space: nowrap;
        }

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

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

  public render(): TemplateResult {
    const value = this.language ?? '';
    return html`
      <span class="menu" part="code-language" @mousedown=${(e: Event) => e.stopPropagation()}>
        <span class="label">Language</span>
        <select
          aria-label="Code block language"
          title="Syntax highlighting language for this code block"
          .value=${value}
          @change=${(e: Event) => {
            const language = (e.target as HTMLSelectElement).value;
            this.emit('wysiwyg-command', {
              name: 'setCodeBlockLanguage',
              attrs: { language: language || null },
            });
          }}
        >
          ${CODE_LANGUAGES.map(
            lang => html`
              <option value=${lang.value} ?selected=${lang.value === value}>
                ${lang.label}
              </option>
            `
          )}
        </select>
      </span>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-code-menu': NileWysiwygCodeMenu;
  }
}