import { LiveAvatarSDK } from '@iwy/live-widgets/headless';

// Get your video/audio elements
const videoEl = document.getElementById('my-video');
const audioEl = document.getElementById('my-audio');

// Create SDK instance
const avatar = new LiveAvatarSDK(
  {
    agentId: 'your-agent-id',
    videoElement: videoEl,
    audioElement: audioEl,
  },
  {
    onConnected: () => console.log('Connected!'),
  }
);

// Connect when your custom button is clicked
document.getElementById('connect-btn').addEventListener('click', () => {
  avatar.connect();
});

// Disconnect
document.getElementById('disconnect-btn').addEventListener('click', () => {
  avatar.disconnect();
});

// Toggle mic
document.getElementById('mic-btn').addEventListener('click', () => {
  avatar.toggleMic();
});

import { LiveAvatarSDK } from '@iwy/live-widgets/headless';

const avatar = new LiveAvatarSDK(
  {
    agentId: 'your-agent-id',
  },
  {
    onConnecting: () => {
      updateStatus('Connecting...');
      showSpinner();
    },
    onConnected: () => {
      updateStatus('Connected');
      hideSpinner();
      enableControls();
    },
    onBotConnected: () => {
      console.log('Bot joined!');
      showBotIndicator();
    },
    onError: (error) => {
      updateStatus('Error: ' + error.message);
      showErrorNotification(error);
    },
    onUserTranscript: (data) => {
      if (data.final) {
        addTranscript('user', data.text);
      }
    },
    onBotTranscript: (data) => {
      addTranscript('bot', data.text);
    },
    onVideoTrack: (track) => {
      // Manually attach video if needed
      const video = document.getElementById('custom-video');
      video.srcObject = new MediaStream([track]);
      video.play();
    },
  }
);

// Your custom UI controls
document.getElementById('start').onclick = () => avatar.connect();
document.getElementById('stop').onclick = () => avatar.disconnect();
document.getElementById('mute').onclick = () => avatar.toggleMic();

import { LiveAvatarSDK } from '@iwy/live-widgets/headless';

let currentAvatar = null;

async function switchAgent(agentId) {
  // Disconnect current
  if (currentAvatar) {
    await currentAvatar.disconnect();
    currentAvatar.destroy();
  }

  // Create new connection
  currentAvatar = new LiveAvatarSDK(
    {
      agentId: agentId,
      videoElement: document.getElementById('video'),
      audioElement: document.getElementById('audio'),
    },
    {
      onConnected: () => {
        console.log(`Connected to agent: ${agentId}`);
      },
    }
  );

  await currentAvatar.connect();
}

// Switch between agents
document.getElementById('agent1-btn').onclick = () => switchAgent('agent-1');
document.getElementById('agent2-btn').onclick = () => switchAgent('agent-2');

const avatar = new LiveAvatarSDK({
  agentId: 'your-agent-id',
  videoElement: document.getElementById('my-video'),
  audioElement: document.getElementById('my-audio'),
});

// That's it! SDK handles track attachment automatically
await avatar.connect();

const avatar = new LiveAvatarSDK(
  { agentId: 'your-agent-id' },
  {
    onVideoTrack: (track) => {
      const video = document.getElementById('my-video');
      video.srcObject = new MediaStream([track]);
      video.play().catch(console.error);
    },
    onAudioTrack: (track) => {
      const audio = document.getElementById('my-audio');
      audio.srcObject = new MediaStream([track]);
      audio.play().catch(console.error);
    },
  }
);

await avatar.connect();

// Both enabled (recommended for best UX)
const avatar = new LiveAvatarSDK({
  agentId: 'your-agent-id',
  warmStart: true,      // Pre-fetch on init (default)
  warmRestart: true,    // Pre-fetch after each call ends (default)
});

// First connect is fast (warmStart)
await avatar.connect();
// ... call ends ...
// Next connect is also fast (warmRestart pre-fetched in background)
await avatar.connect();

// Disable warm restart if you don't expect multiple calls per session
const avatar = new LiveAvatarSDK({
  agentId: 'your-agent-id',
  warmStart: true,      // Still pre-fetch on init
  warmRestart: false,   // Don't pre-fetch after disconnect
});

// Disable all pre-fetching (cold start only)
const avatar = new LiveAvatarSDK({
  agentId: 'your-agent-id',
  warmStart: false,
  warmRestart: false,
});

const avatar = new LiveAvatarSDK({ agentId: 'demo' });

// Later, attach elements
avatar.attachVideoElement(document.getElementById('video-1'));

// Switch to different element
avatar.attachVideoElement(document.getElementById('video-2'));

const avatar = new LiveAvatarSDK(
  { agentId: 'demo' },
  {
    onBotReady: async () => {
      // Wait for bot to be ready before showing UI
      document.getElementById('loading').style.display = 'none';
      document.getElementById('avatar-ui').style.display = 'block';
    },
  }
);

// Only connect after user grants permissions
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(() => avatar.connect())
  .catch((err) => console.error('Mic permission denied'));

const avatar = new LiveAvatarSDK({
  agentId: 'demo',
  videoElement: document.getElementById('my-video'),
});

const avatar = new LiveAvatarSDK(
  { agentId: 'demo' },
  {
    onVideoTrack: (track) => {
      const video = document.getElementById('my-video');
      video.srcObject = new MediaStream([track]);
      video.play();
    },
  }
);

const avatar = new LiveAvatarSDK({
  agentId: 'demo',
  audioElement: document.getElementById('my-audio'),
});

// Request mic permission first
await navigator.mediaDevices.getUserMedia({ audio: true });

// Then connect
await avatar.connect();