import { useState, useEffect } from 'react';
import exerciseService from '../services/exerciseService';
import { useSlugContext } from '../../../../utils/SlugContext';
import { unSlugify } from '../../../../utils/Constant';

import down from '../../../../assets/images/illustration/resultDown.png';
import stay from '../../../../assets/images/illustration/resultStay.png';
import jump from '../../../../assets/images/illustration/resultJump.png';
import finish from '../../../../assets/images/illustration/resultFinish.png';

function getLevelNumber(str) {
  const match = str.match(/\d+/); 
  return match ? parseInt(match[0]) : 0; 
}

function getStatus(curent, next) {
  const setCurrent = getLevelNumber(curent);
  const setNext = getLevelNumber(next);
  let status = '';

  if (setCurrent < setNext) {
    status = 'jump';
  } else if(setCurrent > setNext){
    status = 'down';
  }else{
    status = 'stay';
  }

  return status;
}

const useResults = (topic, level) => {
    const { topicSlugMap } = useSlugContext();
    const [results, setResult] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    const [resultScore, setResultScore] = useState(null);
    const [resultImage, setResultImage] = useState(null);
    const [resultText, setResultText] = useState(null);
    const [resultColor, setResultColor] = useState(null);
    const [nextLevel, setNextLevel] = useState(null);

    const fetchData = async () => {
      try {
        const getLevelId = await exerciseService.getLevelId(topicSlugMap[topic], unSlugify(level));
        const getStdLearning = await exerciseService.checkStdLearning(getLevelId);
        const data = await exerciseService.getScore(getStdLearning);
        setResult(data.payload);

        const status = getStatus(data.payload.CURRENT_LEVEL_NAME, data.payload.NEXT_LEARNING_NAME);
        setResultScore(data.payload.SCORE);
        setNextLevel(getLevelNumber(data.payload.NEXT_LEARNING_NAME));

        if (data.payload.IS_PASS === 1) {
          setResultImage(finish);
          setResultText(<>You conquered <span className='text-blue fw-bold'>LEVEL 6 </span> !<br/> You're a rock star!</>);
          setNextLevel("COMPLETE");
          setResultColor('text-blue');

        }else{
          setNextLevel(data.payload.NEXT_LEARNING_NAME);
          if (status === "jump") {
            setResultImage(jump);
            setResultText(<>Great job! You can jump to...</>);
            setResultColor('text-blue');

          } else if (status === "down") {
            setResultImage(down);
            setResultText(<>Good effort! To improve, you can focus on!</>);
            setResultColor('text-red');

          } else if (status === "stay") {
            setResultImage(stay);
            setResultText(<> Learning is a journey, let's explore this level further to deepen your knowledge.</>);
            setResultColor('');

          }
        }

      } catch (error) {
        console.error("something wrong : ", error);
        setError(error);
      }finally{
        setLoading(false);
      }
    };

    useEffect(() => {
        fetchData();
    }, [topic, level]);

    return { loading, error, resultScore, resultImage, resultText, resultColor, nextLevel };
};

export default useResults;
