"use client"

import React, { useState } from "react"
import { useTranslations } from "next-intl"
import { Button, Drawer, Form, Space, Upload, message } from "antd"
import Image from "next/image"
import classNames from "classnames"
import { CustomUploadCss, DrawerCss } from "./style"
import { CloudUploadOutlined } from "@ant-design/icons"
import { useUploadFileInfolder, useUploadFiles } from "@/hook/useDocument"
import NotifyCustom from "@/component/Common/NotifyCustom"

interface IProps {
  open: boolean
  setOpen: (isOpen: boolean) => void
  formRef?: any
  folderId: number
  onRefresh: () => void
}

const AddnewFiles = (props: IProps) => {
  const trans = useTranslations("document")
  const transButton = useTranslations("button")
  const transRq = useTranslations("required")
  const tranForm = useTranslations("form")
  const uploadFileInfolder = useUploadFileInfolder()
  const uploadFiles = useUploadFiles()
  const [loading, setLoading] = useState(false)
  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 handleCloseDrawer = () => {
    props?.formRef.resetFields()
    props.setOpen(false)
    setLoading(false)
  }

  const handleFinish = (values: any) => {
    setLoading(true)
    const params: File[] = []
    if (values?.documents) {
      values.documents.map((file: any) => {
        params.push(file.originFileObj)
      })
      uploadFiles
        .mutateAsync(params)
        .then((response: any) => {
          if (response?.data?.data) {
            const filenames: string[] = []
            response.data.data.map((file: any) => {
              filenames.push(file.name)
            })
            handleUploadFileInfolder(filenames)
          }
        })
        .catch((error: any) => {
          setMessageNotify({
            type: "error",
            message: transMessage("something_wrong"),
            description: error?.response?.data.msgs || transMessage("fail"),
          })
          setOpenNotify(true)
        }).finally(() => {
          setLoading(false)
        })
    }
  }

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

  const handleUploadFileInfolder = (filenames: string[]) => {
    const params = {
      filenames: filenames,
      folder_id: props.folderId,
    }
    uploadFileInfolder
      .mutateAsync(params)
      .then(() => {
        setMessageNotify({
          type: "success",
          message: transMessage("success"),
          description: trans("add_file_success"),
        })
        handleCloseDrawer()
        props.onRefresh()
        setOpenNotify(true)
      })
      .catch((error: any) => {
        setMessageNotify({
          type: "error",
          message: transMessage("something_wrong"),
          description: error?.response?.data.msgs || transMessage("fail"),
        })
        setOpenNotify(true)
      })
  }

  return (
    <Drawer
      className={classNames(``, DrawerCss)}
      closable
      destroyOnClose
      title={<p>{trans("add_news_files")}</p>}
      placement="right"
      open={props?.open}
      loading={loading}
      onClose={handleCloseDrawer}
      width={444}>
      <Form
        form={props?.formRef}
        onFinish={handleFinish}
        layout="vertical"
        className={classNames("flex flex-col justify-between h-full", CustomUploadCss)}>
        <div>
          <div className="bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--secondary-20)] px-4 lg:px-6 pt-4">
            <Form.Item
              label={
                <p className="m-0 flex items-center justify-between gap-4">
                  <span>{`${trans("media")} (${trans("max")} 6 50MB)`}</span>
                </p>
              }
              name="documents"
              rules={[{ required: true, message: transRq("cannot_empty") }]}
              valuePropName="fileList"
              getValueFromEvent={normFile}>
              <Upload
                maxCount={6}
                multiple
                showUploadList={false}
                disabled={loading}
                className="group h-40 inline-flex w-full justify-center items-center border-[1px] !border-dashed border-[var(--secondary-40)] rounded-lg bg-white">
                <span className="inline-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>
          </div>
          <Form.Item
            noStyle
            shouldUpdate={(prev, next) => prev.documents !== next.documents}>
            {({ getFieldValue }) => {
              const files = getFieldValue("documents") || []
              return (
                <div className="flex flex-col mt-3">
                  {files.map((file: any, index: number) => (
                    <div
                      key={index}
                      className="flex items-center mb-2 hover:text-[var(--primary--70)]">
                      <p className="m-0 mt-1 ml-2">{file.name}</p>
                      <Button
                        type="link"
                        onClick={() => {
                          const updatedFiles = files.filter((_: any, i: any) => i !== index)
                          props?.formRef.setFieldsValue({ documents: updatedFiles })
                        }}>
                        <Image
                          src={"/img/icon/trash_outline.svg"}
                          alt={"trash_outline"}
                          width={20}
                          height={20}
                        />
                      </Button>
                    </div>
                  ))}
                </div>
              )
            }}
          </Form.Item>
        </div>

        <Space className="w-full">
          <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 disabled:opacity-70"
            loading={loading}>
            {transButton("submit")}
          </Button>
        </Space>
      </Form>
      <NotifyCustom
        type={messageNotify.type}
        message={messageNotify.message}
        description={messageNotify.description}
        isOpen={openNotify}
        onclose={() => setOpenNotify(false)}
      />
    </Drawer>
  )
}

export default AddnewFiles