import React, { useState } from "react"
import { Button, Form, Modal, Space, Typography, Upload } from "antd"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"
import { useTranslations } from "next-intl"
import { CloudUploadOutlined } from "@ant-design/icons"
import classNames from "classnames"
import { appConfig } from "@/config/app"
import { useCreateWizzorContactWithFile } from "@/hook/useContacts"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { useQueryClient } from "@tanstack/react-query"
import { IContactsQuery } from "@/type/Contacts"

type IProps = {
  query: IContactsQuery
}

export const AddContactWithFile = ({ query }: IProps) => {
  const [formRef] = Form.useForm()
  const { notify } = useNotificationContext()
  const queryClient = useQueryClient()

  const trans = useTranslations("contact")
  const transButton = useTranslations("button")
  const transRq = useTranslations("required")
  const tranForm = useTranslations("form")
  const transGeneral = useTranslations("general")
  const transMessage = useTranslations("message")

  const [openModal, setOpenModal] = useState(false)

  const createWizzorContactWithFile = useCreateWizzorContactWithFile()

  const showModal = () => {
    setOpenModal(true)
  }

  const handleCancel = () => {
    setOpenModal(false)
  }

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

  const onFinish = (values: any) => {
    if (!values?.file?.[0]) {
      notify({
        type: "error",
        message: transMessage("something_wrong"),
        description: trans("required_file"),
      })
    } else {
      createWizzorContactWithFile
        .mutateAsync(values?.file?.[0]?.originFileObj)
        .then(() => {
          setOpenModal(false)
          formRef.resetFields()
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: trans("add_contact_successfully"),
          })
          queryClient.invalidateQueries({ queryKey: ["contacts.infinite_get_wizzor_list", query] })
        })
        .catch((error) => {
          const concatenatedMsgs = error?.response?.data.msgs || transMessage("fail")

          notify({
            type: "error",
            message: transMessage("something_wrong"),
            description: concatenatedMsgs,
          })
        })
    }
  }

  return (
    <>
      <button
        onClick={showModal}
        type="button"
        className="ml-2 md:ml-0 whitespace-nowrap rounded-lg border border-solid border-[var(--secondary-20)] h-12 px-2 md:px-4 lg:px-8 font-semibold bg-[var(--secondary-10)] hover:border-[var(--primary--70)] hover:text-[var(--primary--70)]">
        <FontAwesomeIcon
          icon={faPlus}
          className="mr-1 md:mr-2"
        />
        {`${trans("upload")} CSV/XLSX`}
      </button>
      <Modal
        loading={createWizzorContactWithFile?.isPending}
        open={openModal}
        title={`${trans("upload")} CSV/XLSX ${"file"}`}
        maskClosable={false}
        onCancel={handleCancel}
        footer={null}>
        <Form
          form={formRef}
          onFinish={onFinish}
          layout="vertical"
          className={classNames("flex flex-col justify-between h-full")}>
          <div>
            <div className="mb-4">
              <Typography.Text>{`- ${transGeneral("download_sample_file_here")}: `} </Typography.Text>
              <a
                href={`${appConfig.rootUrl}/assets/contact-list-template.csv`}
                rel="noreferrer"
                download="Order_Financial_Status_Template.xlsx"
                type="link">
                {transGeneral("download_template")}
              </a>
            </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
                name="file"
                rules={[{ required: true, message: transRq("cannot_empty") }]}
                valuePropName="fileList"
                getValueFromEvent={normFile}>
                <Upload
                  accept=".csv, .xlsx"
                  maxCount={1}
                  showUploadList={false}
                  className="group h-20 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={(pre, next) => pre.file !== next.file}>
              {({ getFieldValue }) => {
                const file = getFieldValue("file")
                return (
                  file?.[0] && (
                    <div className="flex mt-4">
                      <p className="m-0 mt-1 ml-2">{file?.[0]?.name}</p>
                      <Button
                        type="link"
                        icon={
                          <FontAwesomeIcon
                            icon={faTrash}
                            className="text-[#e8262d]"
                          />
                        }
                        onClick={() => {
                          formRef.setFieldsValue({
                            file: "",
                          })
                        }}></Button>
                    </div>
                  )
                )
              }}
            </Form.Item>
          </div>

          <Space className="w-full justify-end mt-6">
            <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)]"
              onClick={() => {
                setOpenModal(false)
                formRef.resetFields()
              }}>
              {transButton("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">
              {transButton("submit")}
            </Button>
          </Space>
        </Form>
      </Modal>
    </>
  )
}