import { Button, Card, Flex, Form, Input, message, Progress, Radio, Space } from "antd"
import { useForm } from "antd/lib/form/Form"
import React, { useCallback, useEffect, useState } from "react"

import DefaultSearchForm from "@/components/shared/form/ui/default-search-form"
import FieldInline from "@/components/shared/form/ui/field-inline"
import FormSearch from "@/components/shared/form/ui/form-search"
import { QuizResponse } from "../../client/quiz"
import FormSection from "../shared/form/ui/form-section"
import DefaultForm from "../shared/form/ui/default-form"
import FormGroup from "../shared/form/ui/form-group"
import dynamic from "next/dynamic"

interface Props {
  quiz: any
  count: number
  step: number
  action: any
}

const QuizChoicePanel = (props: Props) => {
  const { quiz, count, step, action } = props
  const [form] = useForm()
  const [messageApi, contextHolder] = message.useMessage()
  const [didAnswer, setDidAnswer] = useState(false)
  const [selectedValue, setSelectedValue] = useState(null)

  const select = (value: any) => {
    setSelectedValue(value) // Update the state, and thus the selected radio button
    form.setFieldsValue({ answer: value }) // Update the form value if you have a field named 'answer'
  }

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

  const handleFinish = async (value: any) => {
    setDidAnswer(true)
    messageApi.success("응답")
  }

  const nextQuiz = () => {
    messageApi.success("다음 퀴즈")
    form.resetFields()
    setDidAnswer(false)
    action.nextQuiz()
  }

  const finishQuiz = () => {
    messageApi.success("퀴즈 완료")
    form.resetFields()
    window.close
  }

  const Preview = dynamic(() => import("@uiw/react-markdown-preview"), { ssr: false })

  return (
    <>
      {contextHolder}
      <DefaultForm<any> form={form} onFinish={handleFinish}>
        <Space direction="vertical" size="middle" style={{ display: "flex", padding: 20 }} className="mb-10">
          <Preview source={quiz?.question} />
        </Space>
        <Form.Item name="answer">
          <Radio.Group onChange={selectAnswer} style={{ display: "block" }}>
            <Space direction="vertical" size="small" style={{ display: "flex", padding: 10 }}>
              {quiz.choice.map((c: any, index: number) => (
                <Card key={index + 1} hoverable bodyStyle={{ padding: 20 }} onClick={() => select(`${index + 1}`)}>
                  <Flex gap="middle" wrap="wrap">
                    <Radio value={`${index + 1}`}></Radio>
                    <Flex gap="middle" wrap="wrap" style={{ flex: 1 }}>
                      <Preview source={c} style={{ width: "100%" }} />
                    </Flex>
                  </Flex>
                </Card>
              ))}
            </Space>
          </Radio.Group>
        </Form.Item>

        <Flex justify={"center"} align={"center"} className="mt-10">
          <Space size="small">
            <Button htmlType="submit" type="primary" disabled={didAnswer}>
              제출
            </Button>

            {step < count && (
              <Button htmlType="button" type="primary" disabled={!didAnswer} onClick={() => nextQuiz()}>
                다음
              </Button>
            )}

            {step === count && (
              <Button htmlType="button" type="primary" disabled={!didAnswer} onClick={() => finishQuiz()}>
                완료
              </Button>
            )}
          </Space>
        </Flex>
      </DefaultForm>
    </>
  )
}

export default React.memo(QuizChoicePanel)
