import { create, ProgramFormValue, update } from "@/client/program"
import "@uiw/react-markdown-preview/markdown.css"
import "@uiw/react-md-editor/markdown-editor.css"
import { Button, DatePicker, Form, Input, message, Radio, RadioChangeEvent } 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 { TagsInput } from "react-tag-input-component"

import DefaultForm from "@/components/shared/form/ui/default-form"
import FormGroup from "@/components/shared/form/ui/form-group"
import FormSection from "@/components/shared/form/ui/form-section"
import moment from "moment"

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

const ProgramForm = (props: Props) => {
  const { pid, data } = props
  const [form] = useForm()
  const [messageApi, contextHolder] = message.useMessage()

  const [status, setStatus] = useState("")

  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState<any>(null)

  const handleFinish = async (value: ProgramFormValue) => {
    console.log("value", value)
    try {
      setIsLoading(true)
      if (pid) {
        await update(pid, value)
        messageApi.success("수정되었습니다")
        setTimeout(() => Router.back(), 500)
      } else {
        await create(value)
        messageApi.success("생성되었습니다")
        setTimeout(() => Router.back(), 500)
      }
    } catch (e: unknown) {
      messageApi.error("에러가 발생했습니다")
    } finally {
      setTimeout(() => setIsLoading(false), 500)
    }
  }

  const Editor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false })

  const updateData = (data: any) => {
    console.log("updateData", data)
    setFormData(data)
    setFormData((prevData: any) => ({
      ...prevData,
      ["publish_at"]: moment(data?.publish_at),
    }))
  }

  const changeStatus = (e: RadioChangeEvent) => {
    console.log("radio checked", e.target.value)
    setStatus(e.target.value)
  }

  useEffect(() => {
    console.log("use effect data", data)
    if (data) {
      updateData(data)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data])

  useEffect(() => {
    form.resetFields()
    console.log("formData", formData)
  }, [form, formData])

  return (
    <>
      {contextHolder}
      <span></span>
      <DefaultForm<ProgramFormValue> form={form} initialValues={formData} onFinish={handleFinish}>
        <FormSection>
          <FormGroup title="제목">
            <Form.Item name="subject" rules={[{ required: true, message: "필수값입니다" }]}>
              <Input placeholder="제목" value={data?.subject} />
            </Form.Item>
          </FormGroup>
          <FormGroup title="퀴즈단계">
            <Form.Item name="course" rules={[{ required: true, message: "필수값입니다" }]}>
              <Input placeholder="퀴즈단계" value={data?.course} />
            </Form.Item>
          </FormGroup>
          <FormGroup title="설명">
            <Form.Item name="content" rules={[{ required: true, message: "필수값입니다" }]}>
              <Editor height={160} value={data?.content} />
            </Form.Item>
          </FormGroup>

          <FormGroup title="태그">
            <Form.Item name="tag" rules={[{ required: true, message: "필수값입니다" }]}>
              <TagsInput value={data?.tag} name="fruits" placeHolder="태그" />
            </Form.Item>
          </FormGroup>

          <FormGroup title="상태">
            <Form.Item name="status" rules={[{ required: true, message: "필수값입니다" }]}>
              <Radio.Group onChange={changeStatus} value={data?.status}>
                <Radio value="on">ON</Radio>
                <Radio value="off">OFF</Radio>
              </Radio.Group>
            </Form.Item>
          </FormGroup>
          <FormGroup title="등록날짜">
            <Form.Item name="publish_at" rules={[{ required: true, message: "필수값입니다" }]}>
              <DatePicker format={"YYYY-MM-DD"} />
            </Form.Item>
          </FormGroup>
        </FormSection>

        <div className="text-center">
          <Button htmlType="submit" type="primary" loading={isLoading}>
            Save
          </Button>
        </div>
      </DefaultForm>
    </>
  )
}

export default React.memo(ProgramForm)