import React, { useEffect, useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import { Box, Typography } from '@mui/material'
import BackHandIcon from '@mui/icons-material/BackHand'
import { getByLevel } from './Resources.api'

export default function ResourcesPage() {
  const { level } = useParams()
  const [resources, setResources] = useState<any>([])

  useEffect(() => {
    if (level) {
      getByLevel(level)
        .then((result) => {
          setResources(result.data)
        })
        .catch((error) => {
          console.error('Error fetching data:', error)
        })
    }
  }, [level])

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

      <Box sx={{ display: 'flex', flexWrap: 'wrap', mr: 30, ml: 30, justifyContent: 'start' }}>
        {resources.map((value: any, index: any) => {
          return (
            <Box
              component={Link}
              to={'/moreResources/' + value._id}
              sx={{
                width: '280px',
                margin: 4,
                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}
            >
              <Box
                sx={{
                  display: 'flex',
                  flexDirection: 'row',
                  mt: 5,
                  width: '100%',
                  justifyContent: 'center',
                }}
              >
                {level === 'Beginner' ? (
                  <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
                ) : level === 'Intermediate' ? (
                  <>
                    <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
                    <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
                  </>
                ) : (
                  <>
                    <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
                    <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
                    <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
                  </>
                )}
              </Box>
              <Typography
                id='box'
                variant='h6'
                component='div'
                fontWeight={500}
                fontSize={30}
                mt={1}
                letterSpacing={0.5}
                sx={{ color: '#555555' }}
              >
                {value.topic}
              </Typography>
              <Typography
                id='box'
                variant='h6'
                component='div'
                fontWeight={500}
                fontSize={20}
                mt={2}
                mb={5}
                letterSpacing={0.5}
                sx={{ color: '#555555' }}
              >
                {value.details}
              </Typography>
              <Typography
                id='box'
                variant='h6'
                component='div'
                fontWeight={500}
                fontSize={20}
                mb={3}
                letterSpacing={0.5}
                sx={{ color: '#555555' }}
              >
                Level {index + 1}
              </Typography>
            </Box>
          )
        })}

        {level === 'Intermediate' ? (
          <Box
            component={Link}
            to={'/game/' + 'Intermediate'}
            sx={{
              width: '280px',
              margin: 4,
              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',
                },
              },
            }}
          >
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'row',
                mt: 5,
                width: '100%',
                justifyContent: 'center',
              }}
            >
              <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
              <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
            </Box>
            <Typography
              id='box'
              variant='h6'
              component='div'
              fontWeight={500}
              fontSize={30}
              mt={1}
              letterSpacing={0.5}
              sx={{ color: '#555555' }}
            >
              Games
            </Typography>
            <Typography
              id='box'
              variant='h6'
              component='div'
              fontWeight={500}
              fontSize={20}
              mt={2}
              pr={2}
              pl={2}
              mb={5}
              letterSpacing={0.5}
              sx={{ color: '#555555' }}
            >
              Test your know using simple game
            </Typography>
          </Box>
        ) : (
          <></>
        )}

        {level === 'Advanced' ? (
          <Box
            component={Link}
            to={'/moreResources/' + 'Advanced'}
            sx={{
              width: '280px',
              margin: 4,
              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',
                },
              },
            }}
          >
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'row',
                mt: 5,
                width: '100%',
                justifyContent: 'center',
              }}
            >
              <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
              <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
            </Box>
            <Typography
              id='box'
              variant='h6'
              component='div'
              fontWeight={500}
              fontSize={30}
              mt={1}
              letterSpacing={0.5}
              sx={{ color: '#555555' }}
            >
              Games
            </Typography>
            <Typography
              id='box'
              variant='h6'
              component='div'
              fontWeight={500}
              fontSize={20}
              mt={2}
              pr={2}
              pl={2}
              mb={5}
              letterSpacing={0.5}
              sx={{ color: '#555555' }}
            >
              Test your know using simple game
            </Typography>
          </Box>
        ) : (
          <></>
        )}
      </Box>
    </Box>
  )
}
