import { html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../../internal/nile-element';
import { renderGlyph } from '../../internal/glyph';
import type { CommandName } from '../engine/commands';
import '../../nile-lite-tooltip/nile-lite-tooltip';

interface TableOp {
  name: CommandName;
  label: string;
  icon: string;
}

const OPS: TableOp[] = [
  { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },
  { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },
  { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },
  { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },
  { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },
  { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },
  { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },
  { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },
  { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },
  { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },
  { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },
];

/**
 * Compact floating bar shown while the cursor is inside a table. The host
 * positions it; operations bubble up as `wysiwyg-command` events.
 */
@customElement('nile-wysiwyg-table-menu')
export class NileWysiwygTableMenu extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  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: flex;
          gap: 2px;
          padding: 4px;
          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));
        }

        button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 26px;
          height: 26px;
          padding: 0 4px;
          border: none;
          border-radius: 5px;
          background: transparent;
          cursor: pointer;
          font-size: 12px;
          font-weight: 600;
          color: var(--nile-colors-neutral-700, #344054);
        }

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

  public render(): TemplateResult {
    return html`
      <div class="menu" part="table-menu" @mousedown=${(e: Event) => e.preventDefault()}>
        ${OPS.map(
          op => html`
            <nile-lite-tooltip content=${op.label} placement="top">
              <button
                type="button"
                aria-label=${op.label}
                @click=${() => this.emit('wysiwyg-command', { name: op.name })}
              >
                ${renderGlyph(op.icon, 16)}
              </button>
            </nile-lite-tooltip>
          `
        )}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-table-menu': NileWysiwygTableMenu;
  }
}