"use client"

import { useRouter } from "@/i18n/routing"
import { Button, Form, Input, Spin, Upload } from "antd"
import classNames from "classnames"
import { useTranslations } from "next-intl"
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"
import { CustomCkEditerCss } from "../Books/style"
import Image from "next/image"
import { CloudUploadOutlined } from "@ant-design/icons"
import CustomEditor from "../Common/CustomEditor"
import { UseMutateAsyncFunction } from "@tanstack/react-query"
import { AxiosResponse } from "axios"
import { IAlbumDetail, IAlbumRequest } from "@/type/Music"
import { LoadingBox } from "@component/Common/LoadingBox"
import { useNotificationContext } from "@/component/Layout/NotificationContext"

type IProps = {
  type: "create" | "update"
  albumDetail?: IAlbumDetail
  isLoading?: boolean
  dataUploadImage?: AxiosResponse<any, any>
  uploadFileImage?: (options: any) => Promise<void>
  createAlbum?: UseMutateAsyncFunction<AxiosResponse<any, any>, Error, IAlbumRequest, unknown>
  updateAlbum?: UseMutateAsyncFunction<
    AxiosResponse<any, any>,
    Error,
    {
      id: string
      body: IAlbumRequest
    },
    unknown
  >
  revalidate?: (id: string) => Promise<void>
}

const FormAlbum = forwardRef(({ type, albumDetail, isLoading, dataUploadImage, uploadFileImage, updateAlbum, createAlbum, revalidate }: IProps, ref) => {
  const [formRef] = Form.useForm()
  const router = useRouter()
  const { notify } = useNotificationContext()
  const uploadRef = useRef(null)

  const trans = useTranslations("music")
  const tranButton = useTranslations("button")
  const tranForm = useTranslations("form")
  const transGeneral = useTranslations("general")
  const transMedia = useTranslations("media")
  const tranRequired = useTranslations("required")
  const transMessage = useTranslations("message")

  useEffect(() => {
    if (albumDetail) {
      formRef.setFieldsValue({
        title: albumDetail?.title,
        description: albumDetail?.description,
        cover: albumDetail?.cover
          ? [
              {
                uid: albumDetail?.id,
                name: albumDetail?.cover,
                status: "done",
                url: albumDetail?.cover,
                response: {
                  url: albumDetail?.cover,
                },
              },
            ]
          : undefined,
      })
    }
  }, [albumDetail])

  const onFinish = () => {
    formRef.validateFields().then(() => {
      const values = formRef.getFieldsValue()
      const dataReq = {
        title: values?.title,
        description: values?.description,
        ...(values?.cover && dataUploadImage?.data?.data?.name && { cover: dataUploadImage?.data?.data?.name }),
      }

      if (type === "create") {
        createAlbum &&
          createAlbum(dataReq)
            .then(() => {
              onCancel()
              router.push("/music")
              notify({
                type: "success",
                message: transMessage("congratulation"),
                description: trans("added_album_successfully"),
              })
            })
            .catch((error) => {
              let concatenatedMsgs = ""
              if (typeof error?.response?.data.msgs === "string") {
                concatenatedMsgs = error?.response?.data.msgs ? error?.response?.data.msgs : transMessage("fail")
              } else {
                concatenatedMsgs = error?.response?.data.msgs ? Object.values(error?.response?.data.msgs).join("<br />") : transMessage("fail")
              }

              notify({
                type: "error",
                message: transMessage("something_wrong"),
                description: concatenatedMsgs,
              })
            })
      } else if (type === "update" && albumDetail) {
        updateAlbum &&
          updateAlbum({ id: albumDetail?.id || "", body: dataReq })
            .then(() => {
              onCancel()
              revalidate && revalidate(albumDetail?.id || "")
              router.push("/music")
              notify({
                type: "success",
                message: transMessage("congratulation"),
                description: trans("album_update_successful"),
              })
            })
            .catch((error) => {
              let concatenatedMsgs = ""
              if (typeof error?.response?.data.msgs === "string") {
                concatenatedMsgs = error?.response?.data.msgs ? error?.response?.data.msgs : transMessage("fail")
              } else {
                concatenatedMsgs = error?.response?.data.msgs ? Object.values(error?.response?.data.msgs).join("<br />") : transMessage("fail")
              }

              notify({
                type: "error",
                message: transMessage("something_wrong"),
                description: concatenatedMsgs,
              })
            })
      } else {
        console.log("values", values)
      }
    })
  }

  const onCancel = () => {
    formRef.resetFields()
  }

  useImperativeHandle(ref, () => ({
    onFinish,
    onCancel,
  }))

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

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

  return (
    <div className="px-4 py-6 grow overflow-y-auto">
      <Spin spinning={isLoading}>
        <Form
          name={`${albumDetail?.id}_album`}
          form={formRef}
          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 pt-6">
              <p className="text-base font-semibold mb-6">{transMedia("album_information")}</p>
              <Form.Item
                label={transGeneral("title")}
                name="title"
                rules={[{ required: true, message: tranRequired("cannot_empty") }]}>
                <Input
                  placeholder={transGeneral("title")}
                  size="large"
                  onBlur={(e) => {
                    formRef.setFieldsValue({
                      title: e.target.value.trim(),
                    })
                  }}
                  className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
                />
              </Form.Item>
              <Form.Item
                label={tranForm("description")}
                name="description"
                rules={[{ required: true, message: tranForm("placeholder_input", { name: tranForm("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-6 flex items-center justify-between">
                  <span>
                    <span className="text-[var(--danger-50)]">*</span> {tranForm("thumbnail")}
                  </span>
                </p>
                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, currentValues) => prevValues.cover !== currentValues.cover}>
                  {({ getFieldValue }) => {
                    const fileList = getFieldValue("cover")
                    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)] min-h-52 ${
                            fileList ? "flex" : "hidden"
                          }`}>
                          <div className="grow h-full">
                            {(dataUploadImage?.data && fileList) || albumDetail?.cover ? (
                              <Image
                                alt=""
                                src={dataUploadImage?.data?.data?.url ? dataUploadImage?.data?.data?.url : albumDetail?.cover}
                                width={274}
                                height={216}
                                style={{
                                  width: "100%",
                                  height: "100%",
                                }}
                                className="max-w-full max-h-full !h-auto aspect-square object-cover"
                              />
                            ) : (
                              <LoadingBox />
                            )}
                          </div>
                          <div className="flex flex-col shrink-0 basis-[2rem] w-8 gap-4">
                            <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({ cover: 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="cover"
                          valuePropName="fileList"
                          getValueFromEvent={normFile}
                          className={fileList ? "hidden" : ""}
                          rules={[{ required: true, message: tranRequired("cannot_empty") }]}>
                          <Upload
                            ref={uploadRef}
                            accept="image/png, image/jpg"
                            showUploadList={false}
                            listType="picture-card"
                            maxCount={1}
                            customRequest={uploadFileImage}
                            className="group triggerUpload">
                            <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>
                <p className="py-4">(8MB Aspect ratio width and height 1:1)</p>
              </div>
            </div>
          </div>
          <div className="pt-4 flex justify-end items-center gap-2 lg:hidden">
            <Button
              type="default"
              onClick={onCancel}
              className="md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg !px-8 !border-[var(--secondary-20)] !bg-[var(--secondary-10)]"
              loading={isLoading}>
              {tranButton("cancel")}
            </Button>
            <Button
              type="primary"
              onClick={onFinish}
              className="md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg !px-8"
              loading={isLoading}>
              {tranButton("submit")}
            </Button>
          </div>
        </Form>
      </Spin>
    </div>
  )
})

export default FormAlbum