import React, { useEffect, useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import { Box, Typography } from '@mui/material'
import { getByResourcesId, getResourcesById } from './MoreResources.api'

export default function MoreResourcesPage() {
  const { resourcesId } = useParams()
  const [moreResources, setMoreResources] = useState<any>([])

  const [topic, setTopic] = useState<any>('')
  const [details, setDetails] = useState<any>('')

  useEffect(() => {
    if (resourcesId) {
      getByResourcesId(resourcesId)
        .then((result) => {
          setMoreResources(result.data)
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    }
  }, [resourcesId])

  useEffect(() => {
    if (resourcesId) {
      getResourcesById(resourcesId)
        .then((result) => {
          setTopic(result.data.topic)
          setDetails(result.data.details)
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    }
  }, [resourcesId])

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

      <Box sx={{ display: 'flex', flexWrap: 'wrap', mr: 30, ml: 30, justifyContent: 'start ' }}>
        {moreResources.map((value: any, index: any) => {
          return (
            <Box
              component={Link}
              to={'/moreResourcesDetails/' + value._id}
              sx={{
                width: '200px',
                height: '200px',
                margin: 3.6,
                display: 'flex',
                flexDirection: 'column',
                border: 0.1,
                borderBlockColor: '#555555',
                justifyContent: 'center',
                borderRadius: 1,
                textAlign: 'center',
                textDecoration: 'none',
                ':hover': {
                  backgroundColor: '#5a2ce6',
                  color: '#ffffff',
                  '#box': {
                    color: '#ffffff!important',
                  },
                  '& svg': {
                    color: '#ffffff!important',
                  },
                },
              }}
              key={index}
            >
              <Typography
                id='box'
                variant='h6'
                component='div'
                fontWeight={500}
                fontSize={35}
                mt={1}
                letterSpacing={0.5}
                sx={{ color: '#555555' }}
              >
                {value.topic}
              </Typography>

              <Typography
                id='box'
                variant='h6'
                component='div'
                fontWeight={500}
                fontSize={18}
                padding={1}
                mb={5}
                letterSpacing={0.5}
                sx={{ color: '#555555' }}
              >
                {value.details}
              </Typography>
            </Box>
          )
        })}
      </Box>
    </Box>
  )
}
