import { usePlaylistControls, usePlaylistData } from '@waveform-playlist/browser';

function ZoomButtons() {
  const { zoomIn, zoomOut } = usePlaylistControls();
  const { samplesPerPixel, canZoomIn, canZoomOut } = usePlaylistData();

  return (
    <div>
      <button onClick={zoomIn} disabled={!canZoomIn}>
        Zoom In
      </button>
      <button onClick={zoomOut} disabled={!canZoomOut}>
        Zoom Out
      </button>
      <div>Zoom: {samplesPerPixel} samples/pixel</div>
    </div>
  );
}

// From usePlaylistControls:
interface ZoomControls {
  zoomIn: () => void;
  zoomOut: () => void;
}

// From usePlaylistData:
interface ZoomState {
  samplesPerPixel: number;     // Current zoom level
  canZoomIn: boolean;          // Can zoom in further
  canZoomOut: boolean;         // Can zoom out further
}

const { zoomIn, zoomOut } = usePlaylistControls();

// Zoom in (increase detail)
zoomIn();

// Zoom out (decrease detail)
zoomOut();

const { samplesPerPixel } = usePlaylistData();

// Lower values = more detail (zoomed in)
// samplesPerPixel: 100 → Very zoomed in

// Higher values = less detail (zoomed out)
// samplesPerPixel: 10000 → Very zoomed out

function Playlist() {
  const [samplesPerPixel] = useState(4096);  // Initial zoom level

  return (
    <WaveformPlaylistProvider
      tracks={tracks}
      samplesPerPixel={samplesPerPixel}
    >
      {/* Playlist UI */}
    </WaveformPlaylistProvider>
  );
}

const { canZoomIn, canZoomOut } = usePlaylistData();

// canZoomIn: false when at maximum detail
// canZoomOut: false when at minimum detail

if (canZoomIn) {
  zoomIn();  // Safe to zoom in
}

if (canZoomOut) {
  zoomOut();  // Safe to zoom out
}

import { useKeyboardShortcuts, usePlaylistControls } from '@waveform-playlist/browser';

function ZoomShortcuts() {
  const { zoomIn, zoomOut } = usePlaylistControls();

  useKeyboardShortcuts({
    shortcuts: [
      { key: '=', action: zoomIn, description: 'Zoom in' },
      { key: '-', action: zoomOut, description: 'Zoom out' },
      { key: '=', ctrlKey: true, action: zoomIn, description: 'Zoom in (Ctrl)' },
      { key: '-', ctrlKey: true, action: zoomOut, description: 'Zoom out (Ctrl)' },
    ],
  });

  return null;
}

import { usePlaylistData } from '@waveform-playlist/browser';

function ZoomSlider() {
  const { samplesPerPixel, playoutRef } = usePlaylistData();

  // Define zoom levels (powers of 2)
  const zoomLevels = [100, 200, 400, 800, 1600, 3200, 6400, 12800];
  const currentIndex = zoomLevels.findIndex((level) => level >= samplesPerPixel);

  const handleZoomChange = (index: number) => {
    const newSamplesPerPixel = zoomLevels[index];
    // Call engine method directly
    playoutRef.current?.setZoom(newSamplesPerPixel);
  };

  return (
    <div>
      <input
        type="range"
        min={0}
        max={zoomLevels.length - 1}
        value={currentIndex}
        onChange={(e) => handleZoomChange(Number(e.target.value))}
      />
      <div>Zoom: {samplesPerPixel} samples/pixel</div>
    </div>
  );
}

1. User calls zoomIn()
2. Hook delegates to engine.zoomIn()
3. Engine calculates new samplesPerPixel
4. Engine emits 'statechange' event
5. Hook's onEngineState() updates React state
6. Component re-renders with new value

import { startTransition } from 'react';

const onEngineState = (state: EngineState) => {
  if (state.samplesPerPixel !== samplesPerPixelRef.current) {
    samplesPerPixelRef.current = state.samplesPerPixel;
    startTransition(() => {
      setSamplesPerPixel(state.samplesPerPixel);  // Non-urgent update
    });
  }
};

// At load time:
// - Worker generates high-resolution peaks (e.g., 256 samples/pixel)
// - Cached in memory

// On zoom change:
// - resample() creates new peaks at target resolution
// - Near-instant (no worker needed)

import { usePlaylistControls, usePlaylistData } from '@waveform-playlist/browser';

function ZoomToolbar() {
  const { zoomIn, zoomOut } = usePlaylistControls();
  const { samplesPerPixel, canZoomIn, canZoomOut } = usePlaylistData();

  const zoomLevels = [
    { label: '1x', value: 100 },
    { label: '2x', value: 200 },
    { label: '4x', value: 400 },
    { label: '8x', value: 800 },
    { label: '16x', value: 1600 },
    { label: '32x', value: 3200 },
  ];

  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <button onClick={zoomOut} disabled={!canZoomOut}>
        -
      </button>
      
      <div style={{ display: 'flex', gap: 4 }}>
        {zoomLevels.map((level) => (
          <button
            key={level.value}
            onClick={() => {
              // Calculate zoom steps needed
              const currentLevel = samplesPerPixel;
              if (level.value < currentLevel) {
                // Zoom in
                while (samplesPerPixel > level.value && canZoomIn) {
                  zoomIn();
                }
              } else if (level.value > currentLevel) {
                // Zoom out
                while (samplesPerPixel < level.value && canZoomOut) {
                  zoomOut();
                }
              }
            }}
            style={{
              fontWeight: Math.abs(samplesPerPixel - level.value) < 10 ? 'bold' : 'normal',
            }}
          >
            {level.label}
          </button>
        ))}
      </div>
      
      <button onClick={zoomIn} disabled={!canZoomIn}>
        +
      </button>
      
      <div style={{ fontSize: 12, color: '#666' }}>
        {samplesPerPixel} samples/px
      </div>
    </div>
  );
}

function ZoomToFit() {
  const { duration } = usePlaylistData();
  const { playoutRef } = usePlaylistData();
  
  const zoomToFit = () => {
    const viewportWidth = window.innerWidth;
    const totalSamples = duration * 44100;  // Assuming 44.1kHz
    const samplesPerPixel = Math.ceil(totalSamples / viewportWidth);
    
    playoutRef.current?.setZoom(samplesPerPixel);
  };

  return <button onClick={zoomToFit}>Fit to Screen</button>;
}

function ZoomToSelection() {
  const { selectionStart, selectionEnd } = usePlaylistState();
  const { playoutRef } = usePlaylistData();
  
  const zoomToSelection = () => {
    const selectionDuration = selectionEnd - selectionStart;
    const viewportWidth = window.innerWidth;
    const selectionSamples = selectionDuration * 44100;
    const samplesPerPixel = Math.ceil(selectionSamples / viewportWidth);
    
    playoutRef.current?.setZoom(samplesPerPixel);
  };

  return (
    <button 
      onClick={zoomToSelection}
      disabled={selectionStart === selectionEnd}
    >
      Zoom to Selection
    </button>
  );
}