import { useSmarterElements } from '@smarterservices/smarter-elements';

function MyComponent() {
  const elements = useSmarterElements();
  
  const handleCreateElement = async () => {
    const element = elements.create('proctoring/session-viewer', {
      config: {
        // Add your configuration here
      },
      onReady: () => {
        console.log('Element is ready');
      },
      onError: (error) => {
        console.error('Element error:', error);
      }
    });
    
    // Mount the element
    element.mount('#element-container');
    
    // Or open as modal
    await element.openModal({
      width: '80%',
      maxWidth: '900px'
    });
  };
  
  return (
    <div>
      <button onClick={handleCreateElement}>
        Create Session Viewer
      </button>
      <div id="element-container"></div>
    </div>
  );
}

// Load SmarterElements
import { SmarterElements } from '@smarterservices/smarter-elements';

// Initialize
const elements = new SmarterElements({
  baseUrl: '/elements'
});

// Create element
const element = elements.create('proctoring/session-viewer', {
  config: {
    // Add your configuration here
  },
  onReady: () => {
    console.log('Element is ready');
  },
  onError: (error) => {
    console.error('Element error:', error);
  }
});

// Mount to DOM element
element.mount('#element-container');

// Or open as modal
element.openModal({
  width: '80%',
  maxWidth: '900px'
});

interface InputSchema {
  /**
   * Unique identifier for the session
   * @required
   */
  sessionSid: string;

  /**
   * Unique identifier for the exam
   * @required
   */
  examSid: string;

  /**
   * Unique identifier for the installation
   */
  installSid?: string;

  /**
   * Room ID for the LiveKit session (defaults to sessionSid if not provided)
   */
  roomId?: string;

  /**
   * Base URL for the proctoring API
   */
  apiUrl?: string;

  /**
   * Authentication token for the API
   */
  token?: string;

  /**
   * Identity of the current user (e.g., 'instructor', 'proctor')
   */
  identity?: string;

  /**
   * WebSocket URL for LiveKit connection
   */
  websocketUrl?: string;

  /**
   * JWT token containing all necessary data (alternative to individual props)
   */
  data?: string;

  /**
   * User type — determines permissions and UI layout
   * @default 'proctor'
   */
  type?: 'proctor' | 'student';

  /**
   * Initial view mode for the session
   * - 'live'     — real-time stream
   * - 'recorded' — HLS playback of recorded session
   */
  viewMode?: 'live' | 'recorded';

  /**
   * Default tab to show in the SessionDetails panel
   * Valid values: 'flags', 'checkin', 'chat', 'journey', 'info', 'computer', 'identity', 'incidentReport'
   * @default 'flags'
   */
  defaultSessionDetailsTab?: string;

  /**
   * Controls which UI components are visible and active.
   * See EnabledComponentsConfig for all available options.
   */
  enabledComponents?: EnabledComponentsConfig;

  /**
   * Video source configuration
   */
  video?: VideoConfig;

  /**
   * Video magnification (hover-to-zoom) configuration
   */
  magnification?: MagnificationConfig;

  /**
   * Initial audio device settings
   */
  settings?: SettingsConfig;

  /**
   * Proctor room SID this session is attached to — used for
   * transfer operations and multi-room scenarios
   */
  attachedToProctorRoomSid?: string;

  /**
   * Whether this mount is a reconnection attempt
   */
  isReconnect?: boolean;

}

/**
 * Custom tab configuration for sessionDetails
 */
interface SessionDetailsCustomTab {
  /** Unique identifier for the tab */
  id: string;
  /** Display title for the tab */
  title: string;
  /** URL for the tab content (renders in an iframe within the tab) */
  url?: string;
}

/**
 * Advanced sessionDetails configuration
 */
interface SessionDetailsConfig {
  /**
   * Initial tab to display when sessionDetails opens
   * Valid values: 'flags', 'checkin', 'chat', 'journey', 'info', 'computer', 'identity', 'incidentReport'
   * @default 'flags'
   */
  defaultTab?: string;

  /**
   * Whether the session details panel starts collapsed
   * @default true
   */
  defaultCollapsed?: boolean;

  /**
   * Tab configuration — controls which tabs are shown and their order.
   * Each entry can be a built-in tab ID string or a custom tab object.
   *
   * Built-in tab IDs: 'flags', 'checkin', 'chat', 'journey', 'info', 'computer', 'identity', 'incidentReport'
   */
  tabs?: Array<string | SessionDetailsCustomTab>;
}

/**
 * Controls which UI components are visible and active in the SessionViewer.
 * Each key toggles a feature on/off. sessionDetails additionally accepts
 * an object for advanced configuration.
 */
interface EnabledComponentsConfig {
  /**
   * Session details panel — shows session metadata, flags, chat, journey, etc.
   *
   * - `true`  — enable with all default tabs
   * - `false` — disable entirely
   * - `SessionDetailsConfig` object — enable with advanced configuration
   *
   * @default false
   */
  sessionDetails?: boolean | SessionDetailsConfig;

  /**
   * Timeline scrubber bar for recorded session playback
   * @default false
   */
  timeline?: boolean;

  /**
   * Session header bar showing session status, student name, and controls
   * @default true
   */
  sessionHeader?: boolean;

  /**
   * Allow the viewer to enter full-screen mode
   * @default true
   */
  allowFullScreen?: boolean;

  /**
   * Microphone controls — enables the viewer to share their microphone audio
   * @default false
   */
  microphone?: boolean;

  /**
   * Camera controls — enables the viewer to share their camera video
   * @default false
   */
  camera?: boolean;

  /**
   * Chat interface for communicating with the test taker
   * @default false
   */
  chat?: boolean;

  /**
   * Screen share controls — enables the viewer to share their screen
   * @default false
   */
  screenShare?: boolean;

  /**
   * Settings panel for audio device selection and other preferences
   * @default false
   */
  settings?: boolean;

  /**
   * Leave button — allows the viewer to disconnect from the session
   * @default false
   */
  leave?: boolean;
}

/**
 * Video source configuration
 */
interface VideoConfig {
  /**
   * Available video sources
   * @example ['live', 'recorded']
   */
  sources?: Array<'live' | 'recorded'>;

  /**
   * Default video source to display
   * @default 'recorded'
   */
  default?: 'live' | 'recorded';
}

/**
 * Magnification (hover-to-zoom) configuration for video feeds
 */
interface MagnificationConfig {
  /**
   * Whether magnification is enabled
   * @default false
   */
  enabled?: boolean;

  /**
   * Zoom level multiplier (e.g., 2 = 2× zoom)
   * @default 2
   */
  level?: number;

  /**
   * Diameter of the magnification lens in pixels
   * @default 200
   */
  lensSize?: number;
}

/**
 * Audio device specification
 */
interface AudioDeviceConfig {
  /** Device ID (use "default" for system default) */
  deviceId: string;
  /** Human-readable device label */
  label: string;
}

/**
 * Initial settings configuration passed to the SessionViewer
 */
interface SettingsConfig {
  /** Audio device settings */
  audio?: {
    /** Microphone input device */
    input?: AudioDeviceConfig;
    /** Speaker output device */
    output?: AudioDeviceConfig;
  };
}

const element = elements.create('proctoring/session-viewer', {
  config: {
    // Minimal configuration
  }
});

element.mount('#container');

const element = elements.create('proctoring/session-viewer', {
  config: {
    // Your configuration
  }
});

await element.openModal({
  width: '90%',
  maxWidth: '1000px',
  dismissOnDocumentClick: false,
  escapeClose: true
});