import MenuItem from '@material-ui/core/MenuItem'
import {assert} from '@models/utils'
import {createContentOfVideo} from '@stores/sharedContents/SharedContentCreator'
import JitsiMeetJS, {JitsiLocalTrack} from 'lib-jitsi-meet'
import {makeObservable, observable} from 'mobx'
import {useObserver} from 'mobx-react-lite'
import React, {useEffect} from 'react'
import {DialogPageProps} from './DialogPage'

export class CameraSelectorMember{
  @observable.shallow videos: MediaDeviceInfo[] = []
  constructor(){
    makeObservable(this)
  }
}
interface CameraSelectorProps extends DialogPageProps{
  cameras: CameraSelectorMember
}

export const CameraSelector: React.FC<CameraSelectorProps> = (props) => {
  const {setStep} = props
  const {contents, map, participants} = props.stores
  const videoMenuItems = useObserver(() =>
    props.cameras.videos.map((info, idx) => makeMenuItem(info, closeVideoMenu, idx)))
  function makeMenuItem(info: MediaDeviceInfo, close:(did:string) => void, key:number):JSX.Element {
    let selected = false
    selected = info.deviceId === participants.local.devicePreference.videoInputDevice
    const keyStr = String.fromCharCode(65 + key)

    return <MenuItem key={info.deviceId} onClick={() => { close(info.deviceId) }} >
        { `${keyStr}\u00A0${(selected ? '🙂\u00A0' : '\u00A0\u00A0\u2003')}${info.label}` }
      </MenuItem>  //  \u00A0: NBSP, u2003: EM space.
  }
  function closeVideoMenu(did:string) {
    setStep('none')
    if (did) {
      JitsiMeetJS.createLocalTracks({devices:['video'],
        cameraDeviceId: did}).then((tracks: JitsiLocalTrack[]) => {
          if (tracks.length) {
            const content = createContentOfVideo(tracks, map, 'camera')
            contents.shareContent(content)
            assert(content.id)
            contents.tracks.addLocalContent(content.id, tracks)
          }
        },
      )
    }
  }

  //  keyboard shortcut
  useEffect(() => {
    const onKeyPress = (e: KeyboardEvent) => {
      if (e.code.substr(0, 3) === 'Key') {
        const keyNum = e.code.charCodeAt(3) - 65
        closeVideoMenu(props.cameras.videos[keyNum]?.deviceId)
      }
    }
    window.addEventListener('keypress', onKeyPress)

    return () => {
      window.removeEventListener('keypress', onKeyPress)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },        [])


  return <>
    {videoMenuItems}
  </>
}
CameraSelector.displayName = 'CameraSelector'