import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const App = () => {
  const dialogRef = useRef(null);
  const [trigger, setTrigger] = useState(null);

  const openModal = useCallback(() => {
    if (dialogRef.current) {
      setTrigger(document.activeElement);
      dialogRef.current.showModal();
      document.body.style.overflow = "hidden";
    }
  }, []);

  const closeModal = useCallback(() => {
    if (dialogRef.current) {
      dialogRef.current.close();
      trigger?.focus();
      document.body.style.overflow = "";
    }
  }, [trigger]);

  /**
   * フォーカストラップ
   */
  useEffect(() => {
    const dialogEl = dialogRef.current;
    const focusableElements = Array.from(
      dialogEl?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      ) ?? []
    );
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    const handleKeyDown = (e) => {
      if (e.key === "Tab") {
        if (e.shiftKey && document.activeElement === firstElement) {
          e.preventDefault();
          lastElement.focus();
        } else if (!e.shiftKey && document.activeElement === lastElement) {
          e.preventDefault();
          firstElement.focus();
        }
      }
    };

    dialogEl?.addEventListener("keydown", handleKeyDown);
    return () => {
      dialogEl?.removeEventListener("keydown", handleKeyDown);
    };
  }, [dialogRef]);

  /**
   * モーダルの外側をクリックしたときにモーダルを閉じる
   */
  useEffect(() => {
    const dialogEl = dialogRef.current;

    const handleBackdropClick = (event) => {
      if (event.target === dialogEl && event.target !== dialogEl?.firstChild) {
        closeModal();
      }
    };

    dialogEl?.addEventListener("click", handleBackdropClick);
    return () => {
      dialogEl?.removeEventListener("click", handleBackdropClick);
    };
  }, [closeModal]);

  /**
   * モーダルを開いたときにスクロールを禁止する
   * （コンポーネントがアンマウントされるときにスクロールを有効に戻す）
   */
  useEffect(() => {
    return () => {
      document.body.style.overflow = "";
    };
  }, []);

  return (
    <>
      <button onClick={() => openModal()}>Open Modal</button>
      <dialog
        className="c-dialog"
        ref={dialogRef}
        aria-labelledby="title"
        aria-describedby="desc"
      >
        <div className="c-dialog__inner">
          <h2 id="title">タイトル</h2>
          <p id="desc">
            このモーダルは、HTMLのdialog要素を使って実装されています。
          </p>
          <div class="c-btnGroup">
          <button onClick={() => closeModal()}>Close Modal</button>
          <button
            onClick={() => {
              alert("成功");
              closeModal();
            }}
          >
            アクション
          </button>
          </div>
        </div>
      </dialog>
    </>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))