import { Progress } from "antd"
import { useForm } from "antd/lib/form/Form"
import React, { useEffect, useState } from "react"

import dynamic from "next/dynamic"
import QuizChoicePanel from "./QuizChoicePanel"
import QuizCheckPanel from "./QuizCheckPanel"

interface Props {
  quizzes: any
}

const QuizPreviewPanel = (props: Props) => {
  const { quizzes } = props
  const [count, setCount] = useState(5)
  const [step, setStep] = useState(1)
  const [percent, setPercent] = useState(0)
  const [form] = useForm()
  const [quiz, setQuiz] = useState<any>(null)

  const selectAnswer = (e: any) => {
    console.log("selectAnswer", e.target.value)
    // setAnswer(e.target.value)
  }

  const nextQuiz = () => {
    if (step >= count) return

    setStep(step + 1)
  }

  useEffect(() => {
    if (quizzes) {
      const count = quizzes?.length ?? 5
      setCount(count)
      setPercent((step * 100) / count)

      setQuiz(quizzes[0])
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [quizzes])

  useEffect(() => {
    if (quiz) {
      console.log(quiz)
    }
  }, [quiz])

  useEffect(() => {
    if (step > 1) {
      setPercent((step * 100) / count)
      setQuiz(quizzes[step - 1])
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [step])

  const Preview = dynamic(() => import("@uiw/react-markdown-preview"), { ssr: false })
  return (
    <>
      <div className="flex justify-end  mr-5">
        <Progress className="align-end" percent={percent} steps={count} size={[16, 16]} showInfo={false} />
      </div>

      {quiz && quiz.quiz_type === "choice" && (
        <QuizChoicePanel quiz={quiz} count={count} step={step} action={{ nextQuiz }} />
      )}
      {quiz && quiz.quiz_type === "check" && (
        <QuizCheckPanel quiz={quiz} count={count} step={step} action={{ nextQuiz }} />
      )}
    </>
  )
}

export default React.memo(QuizPreviewPanel)
