import React, { createContext, useState, useContext } from "react";
import ChangePasswordPage from "../../pages/authentication/ChangePassword";

const ChangePasswordContext = createContext();

export const ChangePasswordProvider = ({ children }) => {
  const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);

  const openChangePassword = () => setIsChangePasswordOpen(true);
  const closeChangePassword = () => setIsChangePasswordOpen(false);

  return (
    <ChangePasswordContext.Provider
      value={{ isChangePasswordOpen, openChangePassword, closeChangePassword }}
    >
      {children}

      {isChangePasswordOpen && (
        <>
          {/* This is the main Bootstrap modal container */}
          {/* It provides the fixed positioning and high z-index */}
          <div
            className="modal fade show" // 'fade' for animation, 'show' to make it visible
            style={{ display: 'block' }} // Explicitly set display: block for immediate visibility
            tabIndex="-1" // Makes the modal focusable
            role="dialog" // ARIA role for accessibility
            aria-labelledby="changePasswordModalLabel" // Link to a heading for accessibility
            aria-modal="true" // Indicate it's a modal dialog
          >
            {/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */}
            <ChangePasswordPage onClose={closeChangePassword} />
          </div>

          {/* The modal backdrop */}
          <div className="modal-backdrop fade show"></div>
        </>
      )}
    </ChangePasswordContext.Provider>
  );
};

export const useChangePassword = () => useContext(ChangePasswordContext);