import { useEffect, useState } from "react";

const ApptDetails = (props) => {
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target === document.getElementById("apptDetails")) {
      document.getElementById("apptDetails").style.display = "none";
      //deselect previously selected person
      const prevSelectedPersons =
        document.getElementsByClassName("person-selected");
      for (let i = 0; i < prevSelectedPersons.length; i++) {
        prevSelectedPersons[i].className = "person";
      }
    }
  };

  const [appointment, setAppointment] = useState({});

  useEffect(() => {
    setAppointment(props.appointment);
  }, [props]);

  return (
    <div id="apptDetails" className="my-modal">
      <div className="my-modal-content">
        <p className="section-paragraph">
          Name: {appointment.firstName} {appointment.lastName}
        </p>
        <p className="section-paragraph">Phone: {appointment.phone}</p>
        <p className="section-paragraph">Email: {appointment.email}</p>
        <p className="section-paragraph">Date: {appointment.date}</p>
        <p className="section-paragraph">Time: {appointment.time}</p>
        <p className="section-paragraph">Service: TODO</p>
      </div>
    </div>
  );
};

export default ApptDetails;