import React from 'react';
import { Link, useParams, useLocation } from 'react-router-dom';
import { Container, Row, Col, Button } from 'react-bootstrap';
import useResults from '../hooks/useResults';

import Skeleton from 'react-loading-skeleton';

const ExerciseResult = () => {
  const { section, topic, level } = useParams();
  
  const { loading, error, resultScore, resultImage, resultText, resultColor, nextLevel } = useResults(topic, level);

  return (
    <Container className="result-page">
      <Row>
        <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
          {loading ?
              <>
                <Skeleton containerClassName='w-100 d-flex flex-column align-items-center' className='mb-0 rounded-3' style={{height:"5vh", width:"15vw"}} />
                <Skeleton containerClassName='w-100 d-flex flex-column align-items-center' className='mb-0 rounded-4' style={{height:"25vh", width:"30vw"}} />
                <Skeleton containerClassName='w-100 d-flex flex-column align-items-center' className='mb-0 rounded-4' style={{height:"3vh", width:"40vw"}} />
                <Skeleton containerClassName='w-100 d-flex flex-column align-items-center' className='mb-0 rounded-4' style={{height:"3vh", width:"12vw"}} />
                <Skeleton containerClassName='w-100 d-flex flex-column align-items-center' className='mb-0 rounded-4' style={{height:"5vh", width:"15vw"}} />
              </>
            :
            <>
              <h4>Your Result!</h4>
              <h5 className={`${resultColor} fw-bold`}>{resultScore} / 100</h5>
              <img src={resultImage} alt="/" style={{height:"30vh"}}/>
              <p className='my-3 text-muted text-center'>
                {resultText}
              </p>
              <h1 className={`mb-3 display-5 fw-bold ${resultColor}`}>{nextLevel}</h1>
              <Button as={Link} to={`/learning/module/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
            </>
          }
        </Col>
      </Row>
    </Container>
  );
};

export default ExerciseResult;

