"use client"

import { useChangePassword } from "@/hook/useUsers";
import { Button, Form, Input, Modal, Space } from "antd";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { useNotificationContext } from "../Layout/NotificationContext";

type IProps = {
  show: boolean;
  onClose: () => void;
}

export default function ChangePassword({ show, onClose }: IProps) {
  const [formRef] = Form.useForm()
  
  const trans = useTranslations("account")
  const transButton = useTranslations("button")
  const transMessage = useTranslations("message")

  const { notify } = useNotificationContext()
  const [loading, setLoading] = useState(false)
  const changePasswordApi = useChangePassword()

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

  const onFinish = (values: any) => {
    setLoading(true)
    changePasswordApi
      .mutateAsync(values)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("success"),
          description: "Your password has been changed successfully.",
        })
        onClose()
      })
      .catch((error) => {
        const concatenatedMsgs =
          typeof error?.response?.data?.msgs !== "string"
            ? Object.values(error?.response?.data.msgs).join("<br />")
            : error?.response?.data?.msgs || transMessage("fail")

        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: concatenatedMsgs,
        })
      }).finally(() => {
        setLoading(false)
      })
  }

  return (
    <Modal
      open={show}
      onCancel={onClose}
      title=""
      width={600}
      footer={null}
      centered>
      <p className="text-center text-lg font-semibold mb-4">Change Password</p>
      <Form
        name="p_account"
        form={formRef}
        onFinish={onFinish}
        autoComplete="off"
        layout="vertical">
        <Form.Item
          label="Current Password"
          name="password"
          rules={[
            { required: true, message: trans("input_password_please") },
            { min: 8, message: trans("name_minimum_num_characters", { name: trans("password"), num: 8 }) },
            { max: 20, message: trans("name_maxnimum_num_characters", { name: trans("password"), num: 20 }) },
          ]}>
          <Input.Password
            placeholder={trans("enter_your_password")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                password: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label="New Password"
          name="new_password"
          rules={[
            { required: true, message: trans("input_password_please") },
            { min: 8, message: trans("name_minimum_num_characters", { name: trans("password"), num: 8 }) },
            { max: 20, message: trans("name_maxnimum_num_characters", { name: trans("password"), num: 20 }) },
            {
              validator: (_, value) => {
                if (value && /\s/.test(value) && value.length <= 20 && value.length >= 8) {
                  return Promise.reject(new Error(trans("password_must_not_contain_spaces")))
                }
                return Promise.resolve()
              },
            },
          ]}>
          <Input.Password
            placeholder={trans("enter_your_password")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                new_password: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
          />
        </Form.Item>
        <Form.Item
          label="Retype New Password"
          name="new_password_confirm"
          dependencies={["password"]}
          rules={[
            { required: true, message: trans("input_confirm_password_please") },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue("new_password") === value) {
                  return Promise.resolve()
                }
                return Promise.reject(new Error(trans("reentered_password_does_not_match")))
              },
            }),
          ]}>
          <Input.Password
            placeholder={trans("reenter_your_password")}
            size="large"
            onBlur={(e) => {
              formRef.setFieldsValue({
                new_password_confirm: e.target.value.trim(),
              })
            }}
            className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
          />
        </Form.Item>
        <div className="mb-6 flex justify-center items-center gap-4">
          <Button
            className="w-full md:!text-base lg:!text-lg font-bold !h-12 !rounded-lg uppercase"
            loading={loading}>
            {transButton("cancel")}
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            className="w-full md:!text-base lg:!text-lg font-bold !h-12 !rounded-lg uppercase"
            loading={loading}>
            {transButton("submit")}
          </Button>
        </div>
      </Form>
    </Modal>
  )
}