import { html } from '@design.estate/dees-element';

export const demo = () => html`
  <style>
    .demo-container {
      padding: 24px;
      background: hsl(240 10% 4%);
      min-height: 400px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .output-area {
      background: hsl(240 5% 12%);
      border-radius: 8px;
      padding: 16px;
      min-height: 100px;
      color: hsl(0 0% 95%);
      font-family: monospace;
      font-size: 16px;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .output-label {
      color: hsl(0 0% 60%);
      font-size: 12px;
      margin-bottom: 4px;
    }
    .keyboard-wrapper {
      height: 260px;
    }
    .event-log {
      background: hsl(240 5% 8%);
      border-radius: 8px;
      padding: 12px;
      color: hsl(0 0% 70%);
      font-family: monospace;
      font-size: 12px;
      max-height: 100px;
      overflow-y: auto;
    }
  </style>
  <div class="demo-container">
    <div>
      <div class="output-label">Typed text:</div>
      <div class="output-area" id="typed-output">|</div>
    </div>
    <div>
      <div class="output-label">Event log:</div>
      <div class="event-log" id="event-log"></div>
    </div>
    <div class="keyboard-wrapper">
      <eco-applauncher-keyboard
        visible
        @key-press=${(e: CustomEvent) => {
          const output = document.getElementById('typed-output');
          const log = document.getElementById('event-log');
          if (output && log) {
            const currentText = output.textContent?.replace('|', '') || '';
            if (e.detail.type === 'special') {
              if (e.detail.key === 'Backspace') {
                output.textContent = currentText.slice(0, -1) + '|';
              } else if (e.detail.key === 'Enter') {
                output.textContent = currentText + '\n|';
              }
            } else {
              output.textContent = currentText + e.detail.key + '|';
            }
            log.textContent = `key-press: ${JSON.stringify(e.detail)}\n` + log.textContent;
          }
        }}
        @backspace=${() => {
          const log = document.getElementById('event-log');
          if (log) {
            log.textContent = `backspace\n` + log.textContent;
          }
        }}
        @enter=${() => {
          const log = document.getElementById('event-log');
          if (log) {
            log.textContent = `enter\n` + log.textContent;
          }
        }}
        @space=${() => {
          const log = document.getElementById('event-log');
          if (log) {
            log.textContent = `space\n` + log.textContent;
          }
        }}
        @arrow=${(e: CustomEvent) => {
          const log = document.getElementById('event-log');
          if (log) {
            log.textContent = `arrow: ${e.detail.direction}\n` + log.textContent;
          }
        }}
      ></eco-applauncher-keyboard>
    </div>
  </div>
`;