"use client";

import { useEffect, useRef, useState } from "react";
import type { VolunteerPageCopy } from "@/content/volunteer-page";
import { InlineText } from "@/components/cms/LandingInlineEditor";

export default function VolunteerCrisisSupport({ copy }: { copy: VolunteerPageCopy["support"] }) {
  const [open, setOpen] = useState(false);
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (open && !dialog.open) dialog.showModal();
    if (!open && dialog.open) dialog.close();
  }, [open]);

  return (
    <>
      <section className={"vol-supportSection"} aria-labelledby="support-heading">
        <div>
          <h2 id="support-heading"><InlineText path="volunteerCopy.support.title" value={copy.title} /></h2>
          <p><InlineText path="volunteerCopy.support.description" value={copy.description} /></p>
        </div>
        <button
          className={`${"vol-button"} ${"vol-buttonSecondary"} ${"vol-supportButton"}`}
          type="button"
          onClick={() => setOpen(true)}
        >
          <InlineText path="volunteerCopy.support.openCta" value={copy.openCta} />
        </button>
      </section>
      <dialog
        ref={dialogRef}
        className={"vol-dialog"}
        aria-labelledby="crisis-dialog-title"
        aria-describedby="crisis-dialog-description"
        onClose={() => setOpen(false)}
      >
        <div className={"vol-dialogContent"}>
          <div className={"vol-dialogHeader"}>
            <div>
              <span className={"vol-sectionEyebrow"}><InlineText path="volunteerCopy.support.eyebrow" value={copy.eyebrow} /></span>
              <h2 id="crisis-dialog-title"><InlineText path="volunteerCopy.support.dialogTitle" value={copy.dialogTitle} /></h2>
            </div>
            <button
              className={"vol-dialogClose"}
              type="button"
              autoFocus
              aria-label={copy.closeLabel}
              onClick={() => setOpen(false)}
            >
              ×
            </button>
          </div>
          <p id="crisis-dialog-description">
            <InlineText path="volunteerCopy.support.dialogDescription" value={copy.dialogDescription} />
          </p>
          <div className={"vol-hotlineList"}>
            <article className={"vol-hotline"}>
              <h3><InlineText path="volunteerCopy.support.hotline1Name" value={copy.hotline1Name} /></h3>
              <p><InlineText path="volunteerCopy.support.hotline1Value" value={copy.hotline1Value} /></p>
            </article>
            <article className={"vol-hotline"}>
              <h3><InlineText path="volunteerCopy.support.hotline2Name" value={copy.hotline2Name} /></h3>
              <p><InlineText path="volunteerCopy.support.hotline2Value" value={copy.hotline2Value} /></p>
            </article>
          </div>
          <button
            className={`${"vol-button"} ${"vol-buttonSecondary"}`}
            type="button"
            onClick={() => setOpen(false)}
          >
            <InlineText path="volunteerCopy.support.closeCta" value={copy.closeCta} />
          </button>
        </div>
      </dialog>
    </>
  );
}