import React, { useState } from "react";
import SteveMillerImage from "../assets/SteveMiller.jpg";
import PastorImage from "../assets/PastorAndWifeSmall.png";
import useDocumentTitle from "../hooks/useDocumentTitle";
import CopyButton from "../Components/ui/CopyButton";
import ImageModal from "../Components/ui/ImageModal";
import EmailButton from "../Components/ui/EmailButton";
const ChurchStaff = () => {
  useDocumentTitle("NSBC | Church Staff");
  const jenniferCarter = {
    name: "Jennifer Carter",
    title: "Youth Director",
    phone: null,
    email: "jennifer@jubileezoo.com",
    imageSmall: "https://placehold.co/600x400",
    imageLarge: "https://placehold.co/600x400",
    person2: {
      name: "Don",
      title: "Husband",
    },
  };
  const SteveMiller = {
    name: "Steve Miller",
    title: "Worship Leader",
    phone: null,
    email: null,
    imageSmall: SteveMillerImage,
    imageLarge: SteveMillerImage,
    person2: null,
  };
  const PastorAndWifeSmall = {
    name: "Rev. Cecil Marr",
    title: "Pastor and Wife",
    phone: null,
    email: null,
    imageLarge: PastorImage,
    imageSmall: PastorImage,
    person2: {
      name: "Pam Marr",
      title: "Pianist",
    },
  };
  const lindaConnor = {
    name: "Linda Connor",
    title: "Ministry Assistant - Office Secretary",
    phone: null,
    email: "linda@northshrevebaptist.org",
    imageSmall: "https://placehold.co/600x400",
    imageLarge: "https://placehold.co/600x400",
    person2: {
      name: "David",
      title: "Husband",
    },
  };
  const staffArr = [
    PastorAndWifeSmall,
    SteveMiller,
    jenniferCarter,
    lindaConnor,
  ];
  const [activeModalImage, setActiveModalImage] = useState(false);
  const [activeModalTitle, setActiveModalTitle] = useState(false);
  const handleModalOpen = (title, image) => {
    setActiveModalImage(image);
    setActiveModalTitle(title);
    setModalOpen(true);
  };
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <div className="max-w-2xl mx-auto">
      <h1 className="text-4xl flex justify-center">Church Staff</h1>
      <div className="flex flex-col items-start ">
        {staffArr.map((person, index) => (
          <div key={index} className="flex flex-col items-start">
            {index % 2 === 0 ? (
              <section className="grid grid-cols-2 gap-3 items-center p-4 bg-slate-100 w-full h-fit">
                <span>
                  <h2 className="text-2xl">{person.title}</h2>
                  <p>
                    {person.name}
                    {person.person2 && (
                      <span>
                        - {person.person2.name} - {person.person2.title}
                      </span>
                    )}
                  </p>
                  <div className="flex items-center">
                    {person.email && (
                      <>
                        <EmailButton
                          email={jenniferCarter.email}
                          label="Email Jennifer"
                        />
                        <CopyButton
                          text={jenniferCarter.email}
                          title="Copy Jennifer Carter Email"
                        />
                      </>
                    )}
                  </div>
                </span>
                <div>
                  <span>
                    <button
                      onClick={() =>
                        handleModalOpen(person.title, person.imageLarge)
                      }
                      className="w-full"
                    >
                      <img src={person.imageSmall} />
                    </button>
                  </span>
                </div>
              </section>
            ) : (
              <section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
                <span>
                  <button
                    onClick={() =>
                      handleModalOpen(person.title, person.imageLarge)
                    }
                    className="w-full"
                  >
                    <img src={person.imageSmall} />
                  </button>
                </span>
                <div className="flex w-full justify-end">
                  <span className="flex flex-col">
                    <h2 className="text-2xl">{person.title}</h2>
                    <p>
                      {person.name}{" "}
                      {person.person2 && (
                        <span>
                          - {person.person2.name} - {person.person2.title}
                        </span>
                      )}
                    </p>
                    {person.email && (
                      <div className="flex items-center">
                        <EmailButton
                          email={jenniferCarter.email}
                          label={"Email " + person.name}
                        />
                        <CopyButton
                          title={"Copy " + person.name + " Email"}
                          text={person.email}
                        />
                      </div>
                    )}
                  </span>
                </div>
              </section>
            )}
          </div>
        ))}

        {modalOpen && (
          <ImageModal
            image={activeModalImage}
            title={activeModalTitle}
            onClose={() => setModalOpen(false)}
          />
        )}
        <div className="block w-full h-40"></div>
      </div>
    </div>
  );
};

export default ChurchStaff;
