import { Box, Typography } from '@mui/material'
import LockIcon from '@mui/icons-material/Lock'
import LockOpenIcon from '@mui/icons-material/LockOpen'
import React, { useState, useEffect } from 'react'
import { useParams, Link } from 'react-router-dom'
// import { Box, Typography } from '@mui/material';
import { getGameByResourcesId, getUserById } from './game.api'
import { getUserId } from '../../../Config'

export default function GamePage() {
  const { resourcesId } = useParams()
  const [games, setGames] = useState<any>([])
  const [intermediateGameLevel, setIntermediateGameLevel] = useState<any>()
  const [advancedGameLevel, setAdvancedGameLevel] = useState<any>()

  useEffect(() => {
    getUserById(getUserId())
      .then((result) => {
        setIntermediateGameLevel(result.data.intermediateGameLevel)
        setAdvancedGameLevel(result.data.advancedGameLevel)
      })
      .catch((error) => {
        console.error('Error fetching data:', error)
      })
  }, [getUserById])

  useEffect(() => {
    if (resourcesId) {
      getGameByResourcesId(resourcesId)
        .then((result) => {
          setGames(result.data)
        })
        .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}
          mb={4}
          letterSpacing={0.5}
          sx={{ color: '#555555' }}
        >
          {resourcesId} Level Games
        </Typography>
      </Box>

      <Box sx={{ display: 'flex', flexWrap: 'wrap', mr: 30, ml: 30, justifyContent: 'start ' }}>
        {games.map((value: any, index: any) => {
          return (
            <Box
              component={Link}
              to={`/gameDetails/${value._id}/${resourcesId}`}
              sx={{
                width: '150px',
                height: '150px',
                margin: 3.6,
                display: 'flex',
                flexDirection: 'column',
                border: 0.1,
                borderBlockColor: '#555555',
                justifyContent: 'center',
                borderRadius: 1,
                pointerEvents: intermediateGameLevel < value.number ? 'none' : 'auto',
                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={600}
                fontSize={20}
                letterSpacing={0.5}
                sx={{ color: '#555555' }}
              >
                Level {value.number}
              </Typography>
              {resourcesId === 'Intermediate' ? (
                <>
                  {intermediateGameLevel < value.number ? (
                    <LockIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                  ) : (
                    <LockOpenIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                  )}
                </>
              ) : (
                <>
                  {advancedGameLevel < value.number ? (
                    <LockIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                  ) : (
                    <LockOpenIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                  )}
                </>
              )}
            </Box>
          )
        })}
      </Box>
    </Box>
  )
}
