import React, {useCallback} from 'react'
import {useVroomUI} from "@/contexts/VroomUI";

export interface VideoPlayerProps {
  srcobject: any,
  addstyle: any,
  cssclass: any
}

export function VideoPlayer (props: VideoPlayerProps): JSX.Element {
  const vroomUI = useVroomUI()

  const refVideo = useCallback(
    (node: any) => {
      if (node) {
        if (props.srcobject) {
          node.srcObject = props.srcobject
          node.muted = true
        }
      }
    },
    [props.srcobject],
  )

  const styleUpdated = () => {
    return vroomUI.onVideoMirrorChange ? {
      width: '100%',
      transform: 'rotateY(180deg)',
      WebkitTransform: 'rotateY(180deg)',
    } : {
      width: '100%',
    }
  }

  return (
    <video
      style={styleUpdated()}
      ref={refVideo}
      className={props.cssclass}
      autoPlay
      playsInline
      muted
      {...props}
    />
  )
}