import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Box, Typography } from '@mui/material'
import LiveWebCam from '../../../Components/LiveWebCam/LiveWebCam'
import { getByResourcesId } from './MoreResourcesDetails.api'

export default function MoreResourcesDetailsPage() {
  const { itemId } = useParams()
  const [image, setImage] = useState<any>('')
  const [details, setDetails] = useState<any>('')
  const [topic, setTopic] = useState<any>('')
  const [label, setLabel] = useState<any>('')
  useEffect(() => {
    if (itemId) {
      getByResourcesId(itemId)
        .then((result) => {
          setImage(result.data.image)
          setDetails(result.data.details)
          setTopic(result.data.topic)
          setLabel(result.data.label)
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    }
  }, [itemId])

  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        textAlign: 'center',
        alignContent: 'center',
      }}
    >
      <Box>
        <Typography
          variant='h6'
          component='div'
          fontWeight={600}
          fontSize={35}
          mt={3}
          mb={3}
          letterSpacing={0.5}
          sx={{ color: '#555555' }}
        >
          {topic} : {details}
        </Typography>
      </Box>

      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-around',
          width: '100%',
          height: '100%',
          pl: 10,
          pr: 10,
        }}
      >
        <Box id='box_id_1' sx={{ width: '600px', height: '450px', justifyContent: 'center' }}>
          <Typography
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mb={1}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Get Some Idea
          </Typography>
          <img
            src={image}
            alt='Description of your image'
            style={{ width: '600px', height: '450px' }}
          />
        </Box>

        <Box id='box_id_2' sx={{ width: '600px', height: '450px' }}>
          <Typography
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mb={1}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Try Your Self
          </Typography>
          {label ? <LiveWebCam inputData={label} /> : <></>}
        </Box>
      </Box>
    </Box>
  )
}
