import React, { useEffect, useRef } from "react";
import { useFab } from "../../Context/FabContext";

const GlobalOffcanvas = () => {
  const { offcanvas, setIsOffcanvasOpen } = useFab();
  const offcanvasRef = useRef();

  useEffect(() => {
    const el = offcanvasRef.current;
    const bsOffcanvas = new bootstrap.Offcanvas(el);

    const handleShow = () => setIsOffcanvasOpen(true);
    const handleHide = () => setIsOffcanvasOpen(false);

    el.addEventListener("show.bs.offcanvas", handleShow);
    el.addEventListener("hidden.bs.offcanvas", handleHide);

    return () => {
      el.removeEventListener("show.bs.offcanvas", handleShow);
      el.removeEventListener("hidden.bs.offcanvas", handleHide);
    };
  }, []);

  return (
    <div
      className="offcanvas offcanvas-end"
      tabIndex="-1"
      id="globalOffcanvas"
      ref={offcanvasRef}
      aria-labelledby="offcanvasLabel"
         data-bs-backdrop="false"
      data-bs-scroll="true"
    >
      <div className="offcanvas-header">
        <h5 className="offcanvas-title" id="offcanvasLabel">
          {offcanvas.title}
        </h5>
        <button
          type="button"
          className="btn-close text-reset"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        ></button>
      </div>
      <div className="offcanvas-body  mx-0 py-1 flex-grow-0">
        {offcanvas.content || <p>No content</p>}
      </div>
    </div>
  );
};

export default GlobalOffcanvas;