"use client"

import React, { useEffect } from "react"
import { useTranslations } from "next-intl"
import { Button, Drawer, Form, Input, Segmented, Space, Upload } from "antd"
import classNames from "classnames"
import { DrawerCss } from "./style"
import { typeContactOptions } from "@/config/constant"
import { handleUploadImage } from "@/component/Account/Common"
import Image from "next/image"
import { LoadingBox } from "@/component/Common/LoadingBox"
import { CloudUploadOutlined } from "@ant-design/icons"
import { useCreateWizzorContact } from "@/hook/useContacts"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { useQueryClient } from "@tanstack/react-query"
import { IContactsQuery } from "@/type/Contacts"

interface IProps {
  open: boolean
  loading?: boolean
  setOpen: (isOpen: boolean) => void
  query?: IContactsQuery
}

const AddContact = ({ open, setOpen, loading, query }: IProps) => {
  const [formRef] = Form.useForm()
  const { notify } = useNotificationContext()
  const queryClient = useQueryClient()

  const trans = useTranslations("contact")
  const transAccount = useTranslations("account")
  const tranButton = useTranslations("button")
  const tranForm = useTranslations("form")
  const transMessage = useTranslations("message")

  const typeContact = typeContactOptions()

  const createWizzorContact = useCreateWizzorContact()
  const { dataUploadImage, isPending, uploadFileImage } = handleUploadImage()

  const onFinish = (values: any) => {
    const dataReq = {
      name: values?.name,
      type: values?.type,
      email: values?.email,
      phone: values?.phone,
      ...(values?.avatar && dataUploadImage?.data?.data?.name && { avatar: dataUploadImage?.data?.data?.name }),
      ...(values?.title && { title: values?.title }),
      ...(values?.summary && { summary: values?.summary }),
      ...(values?.organization && { organization: values?.organization }),
    }

    createWizzorContact
      .mutateAsync(dataReq)
      .then(() => {
        setOpen(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 ? Object.values(error?.response?.data.msgs).join("<br />") : transMessage("fail")

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

  const typeOptions = typeContact?.map((type) => ({ label: type?.label, value: type?.value }))

  useEffect(() => {
    if (open) {
      formRef.setFieldsValue({
        type: "lead",
      })
    }
  }, [open])

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

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

  return (
    <Drawer
      className={classNames(``, DrawerCss)}
      closable
      destroyOnClose
      maskClosable={false}
      title={<p>{trans("add_new")}</p>}
      placement="right"
      open={open}
      loading={loading}
      onClose={() => {
        setOpen(false)
        formRef.resetFields()
      }}
      width={444}>
      <Form
        name="add_contact"
        form={formRef}
        onFinish={onFinish}
        autoComplete="off"
        layout="vertical">
        <div className="mb-4 flex justify-center">
          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.avatar !== currentValues.avatar}>
            {({ getFieldValue }) => {
              const fileList = getFieldValue("avatar")
              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">
                      {dataUploadImage?.data && fileList ? (
                        <Image
                          alt=""
                          src={dataUploadImage?.data?.data?.url ? dataUploadImage?.data?.data?.url : URL.createObjectURL(fileList[0]?.originFileObj)}
                          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 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({ avatar: 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="avatar"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    className={fileList ? "hidden" : ""}>
                    <Upload
                      accept="image/png, image/jpg"
                      showUploadList={false}
                      listType="picture-card"
                      maxCount={1}
                      customRequest={uploadFileImage}
                      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>

        <Form.Item
          label={trans("contacts")}
          name="name"
          rules={[{ required: true, message: trans("input_contact_name_pl") }]}>
          <Input
            placeholder={trans("input_contact_name")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                name: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label={trans("contact_type")}
          name="type"
          rules={[{ required: true, message: trans("contact_type_pl") }]}>
          <Segmented<string>
            options={typeOptions}
            className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label={trans("summary")}
          name="summary"
          // rules={[{ required: true, message: trans("input_summary_pl") }]}
        >
          <Input.TextArea
            rows={4}
            maxLength={512}
            placeholder={trans("input_summary")}
            className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label={trans("title")}
          name="title"
          // rules={[{ required: true, message: trans("input_contact_title_pl") }]}
        >
          <Input
            placeholder={trans("input_contact_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={transAccount("email_ID")}
          name="email"
          rules={[
            { required: true, message: transAccount("input_email_please") },
            { type: "email", message: transAccount("input_email_type") },
            { max: 256, message: transAccount("name_maxnimum_num_characters", { name: transAccount("email_ID"), num: 256 }) },
          ]}>
          <Input
            placeholder={transAccount("enter_your_email_address")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                email: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 !text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label={trans("phone")}
          name="phone"
          rules={[
            { required: true, message: trans("input_contact_phone_pl") },
            { pattern: /^\+?[0-9]+$/, message: transAccount("invalid_phone_number") },
            { min: 10, message: transAccount("invalid_phone_number") },
            { max: 15, message: transAccount("invalid_phone_number") },
          ]}>
          <Input
            placeholder={trans("input_contact_phone")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                phone: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 !text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label={transAccount("organization")}
          name="organization"
          // rules={[
          //   { required: true, message: tranRequired("cannot_empty") },
          //   { max: 256, message: transAccount("name_maxnimum_num_characters", { name: transAccount("organization"), num: 256 }) },
          // ]}
        >
          <Input
            placeholder={transAccount("enter_your_organization")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                organization: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 !text-[var(--secondary-100)]"
          />
        </Form.Item>

        <Space className="w-full flex 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)]"
            loading={createWizzorContact?.isPending || isPending}
            onClick={() => {
              setOpen(false)
              formRef.resetFields()
            }}>
            {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={createWizzorContact?.isPending || isPending}>
            {tranButton("submit")}
          </Button>
        </Space>
      </Form>
    </Drawer>
  )
}

export default AddContact