import React from 'react';
import { useCallEmbed } from '../hooks/useCallEmbed';
import { CallStatus } from '../features/call-status';
import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';

// Whether the active-call pill is *currently* drawing in the rail. The
// HorseshoeContainer reuses this to decide whether the horseshoe shell
// is justified — when the pill is suppressed (mobile + on call room +
// video) the rail collapses to zero height, so painting the gap-color +
// rounding the appShell would leave a dangling void below the UI.
export function useCallStatusVisible(): boolean {
  const callEmbed = useCallEmbed();
  const selectedRoom = useSelectedRoom();
  const screenSize = useScreenSizeContext();

  if (!callEmbed) return false;
  if (
    screenSize === ScreenSize.Mobile &&
    callEmbed.roomId === selectedRoom &&
    !callEmbed.voiceOnly
  ) {
    return false;
  }
  return true;
}

export function CallStatusRenderer() {
  const visible = useCallStatusVisible();
  const callEmbed = useCallEmbed();

  if (!visible || !callEmbed) return null;
  // Key by roomId so a room-A→room-B call switch (the embed swaps without
  // passing through undefined, so useCallJoined's `!embed` reset never fires)
  // remounts the pill with fresh joined / duration state instead of carrying
  // call A's "joined" + timer into call B's pre-join window.
  return <CallStatus key={callEmbed.roomId} callEmbed={callEmbed} />;
}
