import React, { useMemo } from 'react'
import { Service } from '../../Utils/HTTP'
import useAuth from '../../Auth/useAuth.js';
import { Question } from '../../Components/Test/Cleaver/Question.jsx'
import { Box,Button, Collapse, List } from '@mui/material'
import { TransitionGroup } from 'react-transition-group';
import * as Scroll from 'react-scroll';

export function Cleaver() {

var scroll = Scroll.animateScroll;

  let auth = useAuth();
  let token = useMemo(() => auth.getToken(), [auth])

  const [totalRespondidas, setRespondidas] = React.useState([]);
  const [totalPreguntas, setPreguntas] = React.useState([]);


  React.useEffect(() => {
    let rest = new Service(`/prueba/findid/1`)
    rest.get(token.toString())
      .then(({ data }) => {
        console.log(data.questions)
        setPreguntas(data.questions)
        setRespondidas(data.questions.slice(0,1))
      }).catch(console.log)
  }, [token]);

  const handleAddQuestion = () => {
    let op = { smooth: true, duration: 200, delay :1, offset :20}
    scroll.scrollToBottom(op);
    let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
    const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
    if (nextHiddenItem) {
      setPreguntas(nextHiddenItem);
      let temp = nextHiddenItem.shift()
      setRespondidas([...totalRespondidas,temp]);
    }

    // console.log("RESPONDIDAS: ", totalRespondidas.length)
    // console.log("RESTANTES: ", totalPreguntas.length)
  };

  return (

    <div  className="content-section question">
      <div className="main">
        <Box sx={{ mt: 1 }}>
          <List >
            <TransitionGroup >
              {totalRespondidas.map((item) => (
                <Collapse key={item.id} >
                  <Question key={item.id} id={item.id} quiz={item} />
                </Collapse>
              ))
            }
            </TransitionGroup>
          </List>
        </Box>

        <div className="question_btn">
        <Button
          className="nextquestion_btn"
          sx={{ backgroundColor: 'var(--main)' }}
          variant="contained"
          disabled={totalPreguntas.length <= 0}
          onClick={handleAddQuestion}
        >
            Siguiente Pregunta
        </Button>
          </div>

      </div>
    </div>
  )

}