"use client"

import { useDeleteMyAccount } from "@/hook/useAuth"
import { Button, Form, Input } from "antd"
import { useTranslations } from "next-intl"
import { useState } from "react"
import { useNotificationContext } from "../Layout/NotificationContext"
import { useCookies } from "next-client-cookies"
import { useRouter } from "@/i18n/routing"

type IProps = {
  onCancel?: () => void
}

export default function DeleteAccount({ onCancel }: IProps) {
  const tranButton = useTranslations("button")
  const transRq = useTranslations("required")
  const transMessage = useTranslations("message")
  const tranForm = useTranslations("form")
  const trans = useTranslations("profile")
  const [formRef] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const deleteMyAccount = useDeleteMyAccount()
  const { notify } = useNotificationContext()
  const cookies = useCookies()
  const router = useRouter()

  const onFinish = (values: any) => {
    setLoading(true)
    if (values.confirm === "DELETE") {
      deleteMyAccount
        .mutateAsync()
        .then(() => {
          notify({
            type: "success",
            message: transMessage("success"),
            description: "Your account has been deleted successfully.",
          })
          formRef.resetFields()
          cookies.remove("access_token")
          cookies.remove("isRemember")
          setTimeout(() => {
            router.push("/login")
          }, 500)
        })
        .catch((error) => {
          const concatenatedMsgs = error?.response?.data.msgs || transMessage("fail")
          notify({
            type: "error",
            message: transMessage("something_wrong"),
            description: concatenatedMsgs,
          })
        })
        .finally(() => {
          setLoading(false)
        })
    }
  }

  const handleCancel = () => {
    formRef.resetFields()
    setLoading(false)
    if (onCancel) {
      onCancel()
    } else router.push("/profile")
  }
  return (
    <>
      <p className="text-center border-b border-[var(--secondary-20)] font-medium text-lg lg:text-2xl pb-4">{trans("delete_account")}</p>
      <div className="lg:text-base text-[var(--secondary-100]">
        <p className="pt-6">{trans("delete_your_account_will_remove_all_of_your_information")}</p>
        <p className="mb-6">{trans("this_cannot_be_undone")}</p>
        <p>{trans("remember")}:</p>
        <ul className="list-disc list-inside">
          <li>{trans("if_you_delete_you_must_create_account_again")}</li>
          <li>{trans("you_will_blocked_when_your_account_deleted")}</li>
        </ul>
        <p className="mt-6 font-semibold mb-2">
          {trans("confirm_delete")} <span className="text-[var(--danger-70)]">*</span>
        </p>
        <Form
          name="add_event"
          form={formRef}
          onFinish={onFinish}
          autoComplete="off"
          layout="vertical">
          <Form.Item
            label=""
            name="confirm"
            rules={[{ required: true, message: transRq("cannot_empty") }, { max: 10 }]}>
            <Input
              placeholder=""
              size="large"
              onBlur={(e) => {
                formRef.setFieldsValue({
                  confirm: e.target.value.trim(),
                })
              }}
            />
          </Form.Item>
          <div className="pt-6 flex items-center gap-2 justify-center">
            <Button
              className="w-40 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={handleCancel}>
              {tranButton("cancel")}
            </Button>
            <Button
              htmlType="submit"
              className="w-40 md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg !bg-[var(--danger-70)] !border-[var(--danger-70)] !text-white"
              loading={loading}>
              {tranButton("delete")}
            </Button>
          </div>
        </Form>
      </div>
    </>
  )
}