import Link from "next/link";
import React, { useState } from "react";
import { Modal, Button, Input, Form, notification } from "antd";
import { useMutation, useQuery } from "react-query";
import { sendPasswordResetRequest } from "apiCalls/apiEndpoints";

const ForgotPasswordModal: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  // const {} = useQuery();
  const mutation = useMutation(sendPasswordResetRequest, {
    onSuccess: (data) => {
      notification.open({
        message: "Email Reset Request Success",
        description:
          "We have sent a reset email to your inbox, check it and follow the instructions",
      });
    },
    onError: (err: any) => {
      notification.error({
        message: "Email Reset Request Error",
        description: "An error occured " + err?.message,
      });
    },
  });

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [visible, setVisible] = React.useState(false),
    // handleCancel = () => setVisible(false),
    submitHandler = (payload: any) => {
      mutation.mutate(payload);
      console.log('payload', payload)
    };

  return (
    <>
      <p onClick={showModal} className="text-blue-600">
        forgot your password ?
      </p>
      <Modal
        title="Reset Email Request"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={
          <Button onClick={handleCancel} danger type="primary">
            Close
          </Button>
        }
      >
        <Form onFinish={submitHandler}>
          <Form.Item noStyle>
            <Form.Item
              label="Enter Your Email"
              name="email"
              rules={[{ required: true }]}
            >
              <Input type="email" />
            </Form.Item>
            {/* <p className='text-danger'>{status?.forgot_password?.error?.email?.join('<br />')}</p> */}
          </Form.Item>
          <Form.Item>
            <Button
              loading={mutation.isLoading}
              htmlType="submit"
              type="primary"
            >
              Send Password Change Request
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ForgotPasswordModal;