"use client"

import { FOLDER_COLOR } from "@/config/constant"
import { useRouter } from "@/i18n/routing"
import { filterOption } from "@/util/Common"
import { Button, Form, Input, Select, Space } from "antd"
import { useTranslations } from "next-intl"
import Image from "next/image"
import { useEffect, useState } from "react"
import classNames from "classnames"
import { CustomCkEditerCss } from "../Books/style"
import { useSearchParams } from "next/navigation"
import { useCreateFolder, useUpdateFolder } from "@/hook/useDocument"
import NotifyCustom from "../Common/NotifyCustom"

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

export default function FormFolder({ submit, cancel, edit = false, folder, 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("document")
  const transMessage = useTranslations("message")
  const searchParams = useSearchParams()
  const [folderId, setFolderId] = useState<string>(searchParams.get("folderId") || "")
  const createFolder = useCreateFolder()
  const [openNotify, setOpenNotify] = useState(false)
  const updateFolder = useUpdateFolder()
  const [messageNotify, setMessageNotify] = useState<{
    type: "success" | "error"
    message: string
    description: string
  }>({
    type: "error",
    message: "",
    description: "",
  })

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

  useEffect(() => {
    setFolderId(searchParams.get("folderId") || "")
  }, [searchParams])

  useEffect(() => {
    if (folder) {
      formRef.setFieldsValue({
        name: folder.foldername,
        bgcolor: folder.bgcolor,
      })
    }
  }, [folder])

  const onFinish = (values: any) => {
    const params = Object.assign({}, values)
    setLoading(true)
    if (folderId) {
      params.parent_folder_id = folderId
    } else params.parent_folder_id = null
    if (edit && folder) {
      updateFolder
        .mutateAsync({ ...params, id: folder.id })
        .then(() => {
          setMessageNotify({
            type: "success",
            message: transMessage("congratulation"),
            description: trans("update_folder_success"),
          })
          setOpenNotify(true)
          formRef.resetFields()
          if (folderId) router.push(`/documents/${folderId}`)
          else router.push("/documents")
        })
        .catch((errors) => {
          setMessageNotify({
            type: "error",
            message: transMessage("something_wrong"),
            description: errors?.response?.data.msgs || transMessage("fail"),
          })
          setOpenNotify(true)
          onError()
        })
        .finally(() => {
          setLoading(false)
        })
    } else {
      createFolder
        .mutateAsync(params)
        .then(() => {
          setMessageNotify({
            type: "success",
            message: transMessage("congratulation"),
            description: trans("create_folder_success"),
          })
          setOpenNotify(true)
          formRef.resetFields()
          if (folderId) router.push(`/documents/${folderId}`)
          else router.push("/documents")
        })
        .catch((errors) => {
          setMessageNotify({
            type: "error",
            message: transMessage("something_wrong"),
            description: errors?.response?.data.msgs || transMessage("fail"),
          })
          setOpenNotify(true)
          onError()
        })
        .finally(() => {
          setLoading(false)
        })
    }
  }

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

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

  return (
    <div className="px-4 py-6 grow overflow-y-auto">
      <Form
        name="add_folder"
        form={formRef}
        onFinish={onFinish}
        onError={() => onError()}
        autoComplete="off"
        layout="vertical"
        className={classNames(CustomCkEditerCss)}>
        <div className="grid gap-4 grid-cols-12 lg:grid-rows-3">
          <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 mb-4">
            <p className="text-base font-semibold mb-6">{trans("folder_information")}</p>
            <Form.Item
              label={trans("folder_name")}
              name="name"
              rules={[
                { required: true, message: transMessage("placehoder_input_the_name", { name: trans("folder_name") }) },
                { max: 1024, message: "Event title max 1024" },
              ]}>
              <Input
                placeholder={transMessage("placehoder_input_the_name", { name: trans("folder_name") })}
                size="large"
                onBlur={(e) => {
                  formRef.setFieldsValue({
                    name: e.target.value.trim(),
                  })
                }}
              />
            </Form.Item>
            {/* {edit && (
              <Form.Item
                label={tranForm("description")}
                name="description"
                rules={[{ required: true, message: "Input Kuisine additional info" }]}>
                <CustomEditor />
              </Form.Item>
            )} */}
          </div>
          <div className="col-span-12 lg:col-span-4 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-2">
              <span className="text-[var(--danger-50)]">*</span> {trans("folder_color")}
            </p>
            <p className="text-[var(--secondary-60)] mb-6">{trans("appearance_folder")} </p>
            <Form.Item
              label=""
              name="bgcolor"
              rules={[{ required: true, message: trans("folder_color") }]}>
              <Select
                showSearch
                size="large"
                placeholder={trans("folder_color")}
                filterOption={filterOption}
                labelRender={(option) => {
                  const item = FOLDER_COLOR.find((item) => item.value === option.value)
                  if (item)
                    return (
                      <Space>
                        <Image
                          src={item?.icon}
                          alt={item?.color ?? ""}
                          width={25}
                          height={16}
                        />
                        {option.label}
                      </Space>
                    )
                  return option.label
                }}
                options={FOLDER_COLOR.map((item: any) => {
                  return {
                    ...item,
                    label: item.color,
                    value: item.value,
                  }
                })}
                optionRender={(option) => (
                  <Space>
                    <Image
                      src={option.data.icon}
                      alt={option.data.label}
                      width={25}
                      height={16}
                    />
                    {option.data.label}
                  </Space>
                )}
              />
            </Form.Item>
          </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>
  )
}