Display Layouts

await session.layouts.showTextWall('Hello World!');

// With options
await session.layouts.showTextWall('Important message', {
  durationMs: 5000  // Show for 5 seconds
});

await session.layouts.showDoubleTextWall(
  'Temperature: 72°F',
  'Humidity: 45%'
);

await session.layouts.showReferenceCard({
  title: 'Meeting Reminder',
  text: '2:00 PM - Team Standup\nZoom Room 3'
});

await session.layouts.showDashboardCard({
  left: 'Speed',
  right: '65 mph'
});

await session.layouts.clearView();

const bitmap = new Uint8Array(400 * 240); // Width x Height
// Fill bitmap with pixel data...

await session.layouts.showBitmapView({
  width: 400,
  height: 240,
  bitmap: bitmap
});

interface DisplayOptions {
  durationMs?: number;      // How long to show (ms)
  priority?: 'LOW' | 'NORMAL' | 'HIGH';
  targetView?: 'MAIN' | 'DASHBOARD' | 'ALWAYS_ON';
}

await session.layouts.showTextWall(
  'Line 1\nLine 2\nLine 3'
);

function wrapText(text: string, maxLength: number = 30): string {
  const words = text.split(' ');
  const lines = [];
  let currentLine = '';
  
  for (const word of words) {
    if (currentLine.length + word.length > maxLength) {
      lines.push(currentLine);
      currentLine = word;
    } else {
      currentLine += (currentLine ? ' ' : '') + word;
    }
  }
  
  if (currentLine) lines.push(currentLine);
  return lines.join('\n');
}

// Usage
const wrapped = wrapText('This is a very long text that needs wrapping');
await session.layouts.showTextWall(wrapped);

// Show status briefly
async function showStatus(message: string) {
  await session.layouts.showTextWall(message, {
    durationMs: 2000
  });
}

// Usage
await showStatus('✓ Saved');
await showStatus('⚠ Connection lost');
await showStatus('✗ Error occurred');

class MenuSystem {
  private items: string[];
  private selectedIndex = 0;
  
  constructor(private session: AppSession, items: string[]) {
    this.items = items;
  }
  
  show() {
    const display = this.items.map((item, i) => 
      i === this.selectedIndex ? `> ${item}` : `  ${item}`
    ).join('\n');
    
    this.session.layouts.showTextWall(display);
  }
  
  next() {
    this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
    this.show();
  }
  
  select() {
    return this.items[this.selectedIndex];
  }
}

// Usage
const menu = new MenuSystem(session, ['Home', 'Settings', 'About']);
menu.show();

session.events.onButtonPress((data) => {
  if (data.pressType === 'short') {
    menu.next();
  } else if (data.pressType === 'long') {
    const selected = menu.select();
    console.log(`Selected: ${selected}`);
  }
});

// Update display with live data
async function showLiveData(session: AppSession) {
  const data = await fetchData();
  
  await session.layouts.showReferenceCard({
    title: 'Live Stats',
    text: [
      `Users: ${data.users}`,
      `Messages: ${data.messages}`,
      `Updated: ${new Date().toLocaleTimeString()}`
    ].join('\n')
  });
}

// Update every 30 seconds
setInterval(() => {
  if (session.isConnected) {
    showLiveData(session);
  }
}, 30000);

// Enable dashboard
await session.dashboard.write({
  text: 'Translator Active'
});

// Set dashboard mode
await session.dashboard.mode.set({
  enabled: true,
  alwaysOn: true  // Keep visible even when other apps show content
});

// Bad: Too many updates
for (let i = 0; i < 10; i++) {
  await session.layouts.showTextWall(`Count: ${i}`); // Will be throttled!
}

// Good: Batch updates
const results = await processAllItems();
await session.layouts.showTextWall(`Processed ${results.length} items`);