import React, { useEffect } from 'react'
import { Box } from '@mui/material'
import Webcam from 'react-webcam'
import axios from 'axios'

interface LiveWebCamProps {
  inputData: string
}

const LiveWebCam: React.FC<LiveWebCamProps> = ({ inputData }) => {
  const webcamRef = React.useRef<Webcam>(null)
  const canvasRef = React.useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (webcamRef.current?.video && canvasRef.current) {
        const video = webcamRef.current.video
        const frame = webcamRef.current.getScreenshot()

        // Get Video Properties
        const videoWidth = webcamRef.current.video.videoWidth
        const videoHeight = webcamRef.current.video.videoHeight

        // Set video width
        webcamRef.current.video.width = videoWidth
        webcamRef.current.video.height = videoHeight

        // Set canvas height and width

        const canvas = canvasRef.current
        canvas.width = videoWidth
        canvas.height = videoHeight
        const context = canvas.getContext('2d')

        if (frame && context) {
          console.log('###### 1 ######')
          console.log(inputData)
          console.log('###### 1 ######')
          axios
            .post(
              'http://127.0.0.1:5000/predict',
              { frame, inputData },
              {
                headers: {
                  'Content-Type': 'application/json',
                  charset: 'utf-8',
                },
              },
            )
            .then((response) => {
              console.log('###### 2 ######')
              console.log(response.data.predict)
              console.log('###### 2 ######')

              // Draw the prediction and rectangle on the canvas
              canvas.width = video.videoWidth
              canvas.height = video.videoHeight
              context.drawImage(video, 0, 0, canvas.width, canvas.height)
              context.font = '18px Arial'
              if (response.data.status) {
                context.fillStyle = 'green'
                context.strokeStyle = 'green'
              } else {
                context.fillStyle = 'red'
                context.strokeStyle = 'red'
              }
              context.fillText(`Prediction: ${response.data.prediction}`, 50, 45)
              context.lineWidth = 2
              context.strokeRect(70, 70, 180, 180)
            })
            .catch((error) => {
              console.error('Error:', error)
            })
        }
      }
    }, 2000) // Adjust the interval as needed

    return () => clearInterval(intervalId)
  }, [])

  return (
    <Box
      sx={{
        position: 'relative',
        marginLeft: '-300px',
        width: '600px',
        height: '450px',
      }}
    >
      <Webcam
        ref={webcamRef}
        muted={true}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
        }}
      />

      <canvas
        ref={canvasRef}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
        }}
      />
    </Box>
  )
}

export default LiveWebCam
