import { EditorConsole, ConsoleMessage } from '../../editor/EditorConsole.js';
import { EditorPanelDefinition } from '../../editor/editor-panel.js';
import { ContextMenuDirectory, ContextMenuReadOnlyEntry } from '../context-menu/context-menu.js';

class ConsolePanel extends HTMLElement
{
  __interfaces__ = [ EditorPanelDefinition.type ];
  _initialized = false;

  connectedCallback(): void
  {
    if ( this._initialized ) return;
    this._initialized = true;

    this.className = 'console-panel';
    this.innerHTML = `
      <conp-header>
        <conp-title>Console</conp-title>
        <button class="conp-clear" title="Clear">Clear</button>
      </conp-header>
      <conp-list></conp-list>
    `;

    this.querySelector( '.conp-clear' )!.addEventListener( 'click', () =>
    {
      this.querySelector( 'conp-list' )!.innerHTML = '';
    } );

    EditorConsole.get().messages.forEach( msg => this._append( msg ) );
    this._scrollToBottom();

    EditorConsole.get().onMessage.addListener( msg =>
    {
      this._append( msg );
      this._scrollToBottom();
    } );
  }

  addContextMenuEntries( dir: ContextMenuDirectory ): void
  {
    dir.add( new ContextMenuReadOnlyEntry( dir, 'Console' ) );
  }

  _append( msg: ConsoleMessage ): void
  {
    const list = this.querySelector( 'conp-list' )!;
    const entry = document.createElement( 'conp-entry' );
    entry.className = `conp-entry-${ msg.type }`;
    const t = msg.timestamp;
    const hh = String( t.getHours() ).padStart( 2, '0' );
    const mm = String( t.getMinutes() ).padStart( 2, '0' );
    const ss = String( t.getSeconds() ).padStart( 2, '0' );
    entry.innerHTML = `<conp-time>${ hh }:${ mm }:${ ss }</conp-time><conp-text></conp-text>`;
    ( entry.querySelector( 'conp-text' ) as HTMLElement ).textContent = msg.text;
    list.appendChild( entry );
  }

  _scrollToBottom(): void
  {
    const list = this.querySelector( 'conp-list' ) as HTMLElement;
    if ( list ) list.scrollTop = list.scrollHeight;
  }
}

customElements.define( 'console-panel', ConsolePanel );