import { createApp } from 'vue';
import './style.css';
import { JsonChannelSymbol, WebRtcChannelSymbol } from './model/injectionSymbols';
import { PostMessageChannel } from './model/Remote/Channels/PostMessage';
import SummonApp from './modules/summon/SummonApp.vue';
import { WebRtcChannelSummon } from './model/Remote/Channels/WebRTCChannel';
import { ChromecastChannelSummon } from './model/Remote/Channels/ChromcastSummon';
import { WsSignalingSummon } from './model/Remote/Channels/WsSignaling';

const app = createApp(SummonApp)

const query = new URLSearchParams(location.search);
let name = query.get('name') ?? 'Unknown';
app.provide('name', name);

const channel = (() => {
  if (query.get('channel') === 'postMessage') {
    const channel = new PostMessageChannel(window)
    channel.send({type: 'summoned', name});
    return channel;
  } else if (query.get('channel') === 'chromecast') {
    const chromeCastChannel = new ChromecastChannelSummon();
    const channel = new WsSignalingSummon();

    chromeCastChannel.initialize();
    chromeCastChannel.on(async (msg) => {
      if (msg.type === 'hello') {
        name = msg.name ?? 'Chromecast';
      }
      if (msg.type === 'RtcSignalingConnect') {
        channel.disconnect();
        await channel.connect(msg.uuid);
        channel.send({type: 'summoned', name});
      }
    });
    return channel;
  }
})();

if (channel) {
  const webRtcChannel = new WebRtcChannelSummon(channel);
  app.provide(WebRtcChannelSymbol, webRtcChannel);
  app.provide(JsonChannelSymbol, channel);

  webRtcChannel.on((msg) => {
    if (msg.type === 'connected') {
      webRtcChannel.send({
        type: 'resolution',
        width: window.innerWidth * window.devicePixelRatio,
        height: window.innerHeight * window.devicePixelRatio,
      });
    }
  })
}

app.mount('#app')