"use client"

import { create, QuizFormValue, update } from "@/client/quiz"
import "@uiw/react-markdown-preview/markdown.css"
import "@uiw/react-md-editor/markdown-editor.css"
import { Button, Checkbox, Divider, Form, Input, message, Radio } from "antd"
import { useForm } from "antd/lib/form/Form"
import dynamic from "next/dynamic"
import Router from "next/router"
import React, { useEffect, useState } from "react"

import FormGroup from "@/components/shared/form/ui/form-group"
import FormSection from "@/components/shared/form/ui/form-section"
import router from "next/router"
import QuizChoiceForm from "./QuizChoiceForm"
import QuizCheckForm from "./QuizCheckForm"

interface Props {
  quizType: string
  action: any
}

const QuizTypePanel = (props: Props) => {
  const { quizType, action } = props
  const onChange = (e: any) => {
    console.log("onChange", e.target.value)
    action.selectQuizType(e.target.value)
  }

  useEffect(() => {
    console.log("quizType", quizType)
  }, [quizType])

  return (
    <>
      <Form initialValues={{ quiz_type: quizType }}>
        <FormSection>
          <FormGroup title="문제유형">
            <Form.Item name="quiz_type">
              <Radio.Group size="middle" value={quizType} onChange={onChange}>
                <Radio.Button value="choice">4지선다</Radio.Button>
                <Radio.Button value="check">체크</Radio.Button>
                <Radio.Button value="yes">Yes/No</Radio.Button>
                <Radio.Button value="input">주관식</Radio.Button>
              </Radio.Group>
            </Form.Item>
          </FormGroup>
        </FormSection>
      </Form>
    </>
  )
}

export default React.memo(QuizTypePanel)
