"use client"

import { useRouter } from "@/i18n/routing"
import { Button, DatePicker, Form, Input, Rate, Upload } from "antd"
import classNames from "classnames"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { CustomCkEditerCss } from "../Books/style"
import { CloudUploadOutlined } from "@ant-design/icons"
import dynamic from "next/dynamic"
import Image from "next/image"
import { useUploadImage } from "@/hook/useMedia"
import NotifyCustom from "../Common/NotifyCustom"
import { useCreatePostExperiences, useUpdatePostExperiences } from "@/hook/useKuisine"
import { useNotificationContext } from "../Layout/NotificationContext"
import dayjs from "dayjs"
import { LoadingBox } from "../Common/LoadingBox"
import CustomEditor from "../Common/CustomEditor"
// const CustomEditor = dynamic(() => import("@/component/Common/CustomEditor"), { ssr: false })

type IProps = {
  submit: boolean
  cancel: boolean
  experience?: any
  onError: () => void
}

export default function FormPostExperience({ submit, cancel, experience, onError }: IProps) {
  const [formRef] = Form.useForm()
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const tranButton = useTranslations("button")
  const tranForm = useTranslations("form")
  const trans = useTranslations("kuisine")
  const transGeneral = useTranslations("general")
  const transRq = useTranslations("required")
  const transMessage = useTranslations("message")
  const [openNotify, setOpenNotify] = useState(false)
  const [messageNotify, setMessageNotify] = useState<{
    type: "success" | "error"
    message: string
    description: string
  }>({
    type: "error",
    message: "",
    description: "",
  })
  const uploadImage = useUploadImage()
  const createPostExperiences = useCreatePostExperiences()
  const updatePostExperiences = useUpdatePostExperiences()
  const { notify } = useNotificationContext()

  useEffect(() => {
    formRef.resetFields()
    setLoading(false)
  }, [])

  useEffect(() => {
    if (experience) {
      formRef.setFieldsValue({
        eventhost: experience.eventhost,
        eventtype: experience.eventtype,
        eventdate: dayjs.unix(experience.eventdate),
        message: experience.message,
        ratings: experience.ratings,
        thumbnail: experience.thumbnail ? [
          {
            uid: "-1",
            name: "image.png",
            status: "done",
            url: experience.thumbnail,
            response: {
              url: experience.thumbnail,
            },
          },
        ] : undefined,
      })
    }
  }, [experience])

  const onFinish = (values: any) => {
    setLoading(true)
    const params = Object.assign({}, values)
    params.eventdate = dayjs(values.eventdate).unix()
    if (experience) {
      if (typeof values.thumbnail === "string") delete params.thumbnail 
      else {
        params.thumbnail = values.thumbnail[0].response?.name
      }
      updatePostExperiences
        .mutateAsync({ ...params, id: experience.id })
        .then(() => {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: "Update experience successfully",
          })
          router.push("/kuisine")
        })
        .catch((error) => {
          const concatenatedMsgs = error?.response?.data.msgs ? Object.values(error?.response?.data.msg).join("; ") : transMessage("fail")
          notify({
            type: "error",
            message: transMessage("something_wrong"),
            description: concatenatedMsgs,
          })
        })
    } else {
      if (values.thumbnail && values.thumbnail[0].response?.name) params.thumbnail = values.thumbnail[0].response?.name
      else delete params.thumbnail
      createPostExperiences
        .mutateAsync(params)
        .then((response) => {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: "Post experience successfully",
          })
          router.push("/kuisine")
        })
        .catch((error) => {
          const concatenatedMsgs = error?.response?.data.msgs ? Object.values(error?.response?.data.msgs).join("; ") : transMessage("fail")
          notify({
            type: "error",
            message: transMessage("something_wrong"),
            description: concatenatedMsgs,
          })
        })
    }
  }

  useEffect(() => {
    if (cancel) {
      formRef.resetFields()
      router.push("/kuisine")
    } else if (submit) {
      formRef.submit()
    }
  }, [submit, cancel])

  const handleCancel = () => {
    formRef.resetFields()
    router.push("/kuisine")
  }

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e
    }
    return e?.fileList
  }

  const handleUpload = async (options: any) => {
    const { file, onSuccess, onError } = options
    try {
      const response = await uploadImage.mutateAsync({ image: file })
      if (response.data.success) {
        setMessageNotify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("uploaded_successfully"),
        })
        setOpenNotify(true)
        onSuccess(response.data.data)
      }
    } catch (error: any) {
      const message =
        error?.response?.data?.msgs && typeof error?.response?.data?.msgs === "object"
          ? error?.response?.data?.msgs?.image
          : error?.response?.data?.msgs || transMessage("error_during_upload")
      setMessageNotify({
        type: "error",
        message: transMessage("fail"),
        description: message,
      })
      setOpenNotify(true)
      onError(error)
    }
  }

  const triggerUpload = () => {
    const fileInput = document.querySelector("input[type='file']") as HTMLInputElement
    fileInput?.click()
  }

  return (
    <div className="px-4 py-6 grow overflow-y-auto">
      <Form
        name="add_kuisine"
        form={formRef}
        onFinish={onFinish}
        onError={() => onError()}
        autoComplete="off"
        layout="vertical"
        className={classNames(CustomCkEditerCss)}>
        <div className="grid gap-4 grid-cols-12">
          <div className="col-span-12 lg:col-span-8 bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--secondary-20)] px-4 lg:px-6 mb-4">
            <p className="text-base font-semibold mb-6">{trans("experience_information")}</p>
            <Form.Item
              label={trans("host_event")}
              name="eventhost"
              rules={[{ required: true, message: transMessage("placehoder_input_the_name", { name: trans("host_event") }) }]}>
              <Input
                placeholder={transMessage("placehoder_input_the_name", { name: trans("host_event") })}
                size="large"
                onBlur={(e) => {
                  formRef.setFieldsValue({
                    eventhost: e.target.value.trim(),
                  })
                }}
              />
            </Form.Item>
            <Form.Item
              label={trans("type_event")}
              name="eventtype"
              rules={[
                { required: true, message: transMessage("placehoder_input_the_name", { name: trans("type_event") }) },
                { max: 2048, message: "Type of Event max 1024" },
              ]}>
              <Input
                placeholder={transMessage("placehoder_input_the_name", { name: trans("type_event") })}
                size="large"
                onBlur={(e) => {
                  formRef.setFieldsValue({
                    eventtype: e.target.value.trim(),
                  })
                }}
              />
            </Form.Item>
            <Form.Item
              label={trans("date_event")}
              name="eventdate"
              rules={[{ required: true, message: "Choose date" }]}>
              <DatePicker
                className="w-full"
                format="MMM DD, YYYY"
                size="large"
              />
            </Form.Item>
            <Form.Item
              label={trans("your_experience")}
              name="message"
              rules={[{ required: true, message: "Input Kuisine description" }]}>
              <CustomEditor />
            </Form.Item>
          </div>
          <div className="col-span-12 lg:col-span-4">
            <div className="bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--secondary-20)] px-4 lg:px-6 pt-6 mb-4">
              <p className="text-base font-semibold mb-4">
                <span className="text-[var(--danger-50)]">*</span> {trans("your_ratings")}
              </p>
              <Form.Item
                label=""
                name="ratings"
                rules={[{ required: true, message: "Choose type" }]}>
                <Rate style={{ fontSize: 36 }} />
              </Form.Item>
            </div>
            <div className="bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--secondary-20)] px-4 lg:px-6 pt-6 mb-4">
              <p className="text-base font-semibold mb-6 flex items-center justify-between">
                <span>
                  <span className="text-[var(--danger-50)]">*</span> {tranForm("thumbnail")} (8MB)
                </span>
                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, currentValues) => prevValues.thumbnail !== currentValues.thumbnail}>
                  {({ getFieldValue }) => {
                    const fileList = getFieldValue("thumbnail")
                    return (
                      <span className="flex gap-1 items-center">
                        <span>{fileList ? -fileList.length : 0}</span>
                        <Image
                          src="/img/icon/image-outline.svg"
                          alt="check"
                          width={16}
                          height={16}
                        />
                      </span>
                    )
                  }}
                </Form.Item>
              </p>
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) => prevValues.thumbnail !== currentValues.thumbnail}>
                {({ getFieldValue }) => {
                  const fileList = getFieldValue("thumbnail")
                  return (
                    <>
                      <div
                        className={`items-center gap-2 md:gap-6 lg:gap-2 xl:gap-4 bg-white px-2 xl:px-4 py-4 rounded-lg border-[2px] border-dashed border-[var(--secondary-40)] h-52 ${
                          fileList ? "flex" : "hidden"
                        }`}>
                        <div className="grow h-full max-w-[75%] xl:max-w-[80%]">
                          {fileList && fileList[0] && fileList[0]?.response?.url ? (
                            <Image
                              alt=""
                              src={fileList[0]?.response ? fileList[0]?.response?.url : URL.createObjectURL(fileList[0]?.originFileObj)}
                              width={274}
                              height={216}
                              style={{
                                width: "100%",
                                height: "100%",
                              }}
                              className="max-w-full max-h-full object-cover"
                            />
                          ) : fileList && fileList[0] && fileList[0]?.error ? (
                            <Image
                              alt=""
                              src="/img/default_image.jpg"
                              width={274}
                              height={216}
                              style={{
                                width: "100%",
                                height: "100%",
                              }}
                              className="max-w-full max-h-full object-cover"
                            />
                          ) : (
                            <LoadingBox />
                          )}
                        </div>
                        <div className="flex flex-col shrink-0 basis-[2rem] w-8 md:flex-row lg:flex-col md:basis-1/3 md:gap-4 lg:gap-0 lg:basis-[2rem]">
                          <button
                            type="button"
                            onClick={triggerUpload}
                            className="group bg-[var(--secondary-100)] inline-flex justify-center items-center rounded hover:opacity-80 w-8 h-8">
                            <Image
                              src="/img/icon/refresh_white.svg"
                              alt="share"
                              width={24}
                              height={24}
                            />
                          </button>
                          <button
                            type="button"
                            onClick={() => formRef.setFieldsValue({ thumbnail: null })}
                            className="group bg-[var(--secondary-20)] inline-flex justify-center items-center rounded hover:bg-[var(--primary--70)] w-8 h-8">
                            <Image
                              src="/img/icon/trash_outline.svg"
                              alt="share"
                              width={24}
                              height={24}
                              className="group-hover:hidden"
                            />
                            <Image
                              src="/img/icon/trash_outline_white.svg"
                              alt="share"
                              width={24}
                              height={24}
                              className="hidden group-hover:block"
                            />
                          </button>
                        </div>
                      </div>
                      <Form.Item
                        label=""
                        name="thumbnail"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        className={fileList ? "hidden" : ""}
                        rules={[{ required: true, message: transRq("cannot_empty") }]}>
                        <Upload
                          accept="image/*"
                          showUploadList={false}
                          listType="picture-card"
                          maxCount={1}
                          customRequest={handleUpload}
                          className="group">
                          <span className="flex gap-2 text-[var(--primary--90)] bg-[var(--primary--20)] font-semibold px-4 py-2 rounded-lg transition-transform duration-100 ease-in-out group-hover:scale-110">
                            <span>{tranForm("upload_file")}</span>
                            <CloudUploadOutlined />
                          </span>
                        </Upload>
                      </Form.Item>
                    </>
                  )
                }}
              </Form.Item>
            </div>
          </div>
        </div>
        <div className="pt-4 flex items-center gap-2 md:hidden">
          <Button
            className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg !border-[var(--secondary-20)] !bg-[var(--secondary-10)]"
            loading={loading}
            onClick={handleCancel}>
            {tranButton("cancel")}
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg"
            loading={loading}>
            {tranButton("submit")}
          </Button>
        </div>
      </Form>
      <NotifyCustom
        type={messageNotify.type}
        message={messageNotify.message}
        description={messageNotify.description}
        isOpen={openNotify}
        onclose={() => setOpenNotify(false)}
      />
    </div>
  )
}