import React, {useEffect} from 'react'
import {useVroomUI} from '@/contexts/VroomUI'
import useVroomSdk from '@/hooks/useVroomSdk'
import isMobileHelper from '@/utils/isMobile.helper'
import {useSdkStateGlobal} from '@/contexts/SdkStateGlobal'
import VroomUILayout01 from '../layout/VroomUILayout01'
import VroomUILayout02 from '../layout/VroomUILayout02'
import VroomUILayout03 from '../layout/VroomUILayout03'
import VroomUILayout04 from '../layout/VroomUILayout04'

export function Root(): JSX.Element {
  const vroomUI = useVroomUI()
  const sdkStateGlobal = useSdkStateGlobal()

  const {
    sdkState,
    attendees,
    participantsState,
    callStarted,
    localStream,
    onStartCall,
    onHangupCall,
  } = useVroomSdk({
    config: vroomUI.config,
    enableAudio: true,
    enableVideo: true,
    callStart: false,
    username: vroomUI.config.displayName,
    vroomUIProps: vroomUI,
  })

  useEffect(() => {
    if (
      vroomUI.onValueCameraChangeDeviceId &&
      sdkStateGlobal.currentCamera &&
      vroomUI.onValueCameraChangeDeviceId !== sdkStateGlobal.currentCamera?.deviceId
    ) {
      const deviceIndex = sdkStateGlobal
        .cameraList
        .findIndex((i: MediaDeviceInfo) => i.deviceId === vroomUI.onValueCameraChangeDeviceId)

      // @ts-ignore
      sdkState.onSwitchCamera(sdkState, sdkStateGlobal.cameraList[deviceIndex], true)
      sdkStateGlobal.setCurrentCamera(sdkStateGlobal.cameraList[deviceIndex])
      vroomUI.setEmitCurrentCamera(sdkStateGlobal.cameraList[deviceIndex])
    }
  }, [vroomUI.onValueCameraChangeDeviceId, sdkStateGlobal.currentCamera])

  useEffect(() => {
    if (sdkStateGlobal.currentCamera && isMobileHelper()) {
      // @ts-ignore
      sdkState.onSwitchCamera(sdkState, sdkStateGlobal.currentCamera, vroomUI.onValueFrontCamera)
    }
  }, [vroomUI.onValueFrontCamera, sdkStateGlobal.currentCamera]);

  useEffect(() => {
    // @ts-ignore
    vroomUI.setEmitCameraDeviceList(sdkState?.devices?.filter((i: MediaDeviceInfo) => i.kind === 'videoinput'))
    vroomUI.setEmitIsMobile(() => isMobileHelper())
    // @ts-ignore
  }, [sdkState?.devices])

  useEffect(() => {
    if (sdkState) {
      // @ts-ignore
      sdkState.onMuteCli(sdkState, vroomUI.onValueMuteAudio, 'audio')
    }
  }, [vroomUI.onValueMuteAudio])

  useEffect(() => {
    if (sdkState) {
      // @ts-ignore
      sdkState.onMuteCli(sdkState, vroomUI.onValueMuteVideo, 'video')
    }
  }, [vroomUI.onValueMuteVideo])

  useEffect(() => {
    if (vroomUI.onValueCallStart && !callStarted) {
      onStartCall()
    }

    if (callStarted && !vroomUI.onValueCallStart) {
      onHangupCall()
    }
  }, [vroomUI.onValueCallStart, onStartCall, callStarted])

  switch (vroomUI.layoutUI) {
    case 4:
      return sdkState === null ? <></> : (
        <VroomUILayout04
          localDisplayName={vroomUI.config.displayName}
          participantsState={sdkStateGlobal.participants}
          sdkState={sdkState}
          attendees={sdkStateGlobal.attendees}
          localStream={localStream}
        />
      )
    case 3:
      return (
        <VroomUILayout03
          localDisplayName={vroomUI.config.displayName}
          participantsState={participantsState}
          sdkState={sdkState}
          attendees={attendees}
        />
      )
    case 2:
      return (
        <VroomUILayout02
          localDisplayName={vroomUI.config.displayName}
          participantsState={participantsState}
          sdkState={sdkState}
          attendees={attendees}
        />
      )
    case 1:
    default:
      return (
        <VroomUILayout01
          localDisplayName={vroomUI.config.displayName}
          participantsState={participantsState}
          sdkState={sdkState}
          attendees={attendees}
        />
      )
  }
}