import { Alert, Button, Divider, MenuProps, Popconfirm, Space } from "antd"
import { ColumnsType } from "antd/es/table"
import Link from "next/link"

import { IQuiz, useQuizzes } from "@/client/quiz"
import DefaultTable from "@/components/shared/ui/default-table"
import DefaultTableBtn from "@/components/shared/ui/default-table-btn"
import dynamic from "next/dynamic"
import router from "next/dist/client/router"
import React from "react"
import { useEffect } from "react"

interface Props {
  pid: any
  data: any
}

const QuizList = (props: Props) => {
  const { pid, data } = props

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

  const openNewQuiz = () => {
    const sequence = data ? data?.data.length + 1 : 1
    router.push(`/program/${pid}/quiz/create?sequence=${sequence}`)
  }

  const Preview = dynamic(() => import("@uiw/react-markdown-preview"), { ssr: false })
  const columns: ColumnsType<IQuiz> = [
    {
      title: "번호",
      dataIndex: "sequence",
      align: "center",
      width: 20,
      render: (value: string, item: IQuiz) => {
        return <span>{value}</span>
      },
    },
    {
      title: "문제",
      width: 160,
      align: "left",
      dataIndex: "question",
      render: (value: string, item: IQuiz) => {
        return (
          <Link href={`/program/${pid}/quiz/${item.id}`}>
            <Preview source={value} />
          </Link>
        )
      },
    },
    {
      title: "유형",
      dataIndex: "quiz_type",
      align: "center",
      width: 40,
      render: (value: string, item: IQuiz) => {
        return <span>{value}</span>
      },
    },
  ]

  return (
    <>
      <DefaultTableBtn className="justify-between">
        <div></div>

        <div className="flex-item-list">
          <Space>
            <Link href={`/program/${pid}/preview`} target="_blank">
              <Button type="primary">Preview</Button>
            </Link>
            <Button type="primary" onClick={() => openNewQuiz()}>
              New
            </Button>
          </Space>
        </div>
      </DefaultTableBtn>

      <Space />

      <DefaultTable<IQuiz> columns={columns} dataSource={data?.data || []} pagination={false} className="mt-3" />
    </>
  )
}

export default React.memo(QuizList)
