"use client"

import "@uiw/react-markdown-preview/markdown.css"
import "@uiw/react-md-editor/markdown-editor.css"
import React, { useState } from "react"

import QuizChoiceForm from "./QuizChoiceForm"
import QuizCheckForm from "./QuizCheckForm"
import QuizTypePanel from "./QuizTypePanel"

interface Props {
  qid?: any
  pid?: any
  data?: any
}

const QuizForm = (props: Props) => {
  const { pid, qid, data } = props
  const [quizType, setQuizType] = useState(data?.quiz_type ? data.quiz_type : "choice")

  const selectQuizType = (quizType: string) => {
    console.log("selectQuizType", quizType)
    setQuizType(quizType)
  }

  console.log("quiz_type", data ? data.quiz_type : "choice")

  return (
    <>
      <QuizTypePanel quizType={quizType} action={{ selectQuizType }} />
      {quizType === "choice" && <QuizChoiceForm pid={pid} qid={qid} data={data} />}
      {quizType === "check" && <QuizCheckForm pid={pid} qid={qid} data={data} />}
    </>
  )
}

export default React.memo(QuizForm)
