import React, { createContext, ReactNode } from 'react'

import { VroomUIProps } from 'VroomUI'
import { VroomUIBase } from 'types/VroomUIBase'

export interface VroomUIContextValue extends VroomUIBase {}

export const VroomUIContext = createContext<VroomUIBase | undefined>(undefined)

export interface VroomUIProviderProps {
  initialProps: VroomUIProps
  children?: ReactNode
}

export function VroomUIProvider(props: VroomUIProviderProps): JSX.Element {
  const { initialProps } = props

  const value: VroomUIContextValue = {
    config: initialProps.config,
    layoutUI: initialProps.layoutUI,
    onValueFrontCamera: initialProps.onValueFrontCamera,
    onValueCallStart: initialProps.onValueCallStart,
    onValueMuteAudio: initialProps.onValueMuteAudio,
    onValueMuteVideo: initialProps.onValueMuteVideo,
    camera: initialProps.camera,
    setEmitCurrentCamera: initialProps.setEmitCurrentCamera,
    setEmitCameraDeviceList: initialProps.setEmitCameraDeviceList,
    setEmitIsMobile: initialProps.setEmitIsMobile,
    onValueCameraChangeDeviceId: initialProps.onValueCameraChangeDeviceId,
    onVideoMirrorChange: initialProps.onVideoMirrorChange,
  }

  return (
    <VroomUIContext.Provider value={value}>
      {props.children}
    </VroomUIContext.Provider>
  )
}