import { useRef, useState } from "react";

export function LeaveLessonDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);
  const leaveRef = useRef<HTMLButtonElement>(null);

  function openDialog() {
    setIsOpen(true);
    window.setTimeout(() => closeRef.current?.focus(), 0);
  }

  function closeDialog() {
    setIsOpen(false);
    window.setTimeout(() => triggerRef.current?.focus(), 0);
  }

  return (
    <section>
      <button ref={triggerRef} type="button" onClick={openDialog}>
        Keluar dari lesson
      </button>
      {isOpen ? (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="leave-dialog-title"
          onKeyDown={(event) => {
            if (event.key === "Escape") closeDialog();
          }}
        >
          <h2 id="leave-dialog-title">Keluar dari lesson?</h2>
          <button
            ref={closeRef}
            type="button"
            onClick={closeDialog}
            onKeyDown={(event) => {
              if (event.key === "Tab" && event.shiftKey) {
                event.preventDefault();
                leaveRef.current?.focus();
              }
            }}
          >
            Tetap belajar
          </button>
          <button ref={leaveRef} type="button" onKeyDown={(event) => {
            if (event.key === "Tab" && !event.shiftKey) {
              event.preventDefault();
              closeRef.current?.focus();
            }
          }}>
            Keluar
          </button>
        </div>
      ) : null}
    </section>
  );
}