import { useEffect, useState } from "react";
import AppointmentService from "../../service/AppointmentService";

const VisitorView = (props) => {
  //user refers to the ownwer of the current page, not the person browsing the page
  const [user, setUser] = useState({});

  //details of the person scheduling an appointment
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");

  useEffect(() => {
    setUser(props.user);
  }, [props.user]);

  const handleSubmit = (event) => {
    event.preventDefault();
    const appointmentObject = {
      firstName: firstName,
      lastName: lastName,
      phone: phone,
      email: email,
      date: date,
      time: time,
      userId: user.userId,
    };
    console.log(appointmentObject);
    AppointmentService.createAppointment(appointmentObject);
  };

  return (
    <div>
      <div>Sheduled Meetings:</div>
      <div>
        {JSON.stringify(user.appointments)}
        {/*user .appointments.map((appointment) => (
          <div key={appointment.appointmentId}>
            <p>{appointment.firstName}</p>
            <p>{appointment.firstName}</p>
          </div>
        ))} */}
      </div>
      <div>&nbsp;</div>
      <div>Schedule Meeting:</div>
      <form style={{ display: "flex", flexDirection: "column" }}>
        <label>
          First Name:
          <input
            type="text"
            onChange={(event) => {
              setFirstName(event.target.value);
            }}
          ></input>
        </label>
        <label>
          Last Name:
          <input
            type="text"
            onChange={(event) => {
              setLastName(event.target.value);
            }}
          ></input>
        </label>
        <label>
          Phone Number:
          <input
            type="number"
            placeholder="XXX-XXX-XXXX"
            onChange={(event) => {
              setPhone(event.target.value);
            }}
          ></input>
        </label>
        <label>
          Email Address:
          <input
            type="text"
            onChange={(event) => {
              setEmail(event.target.value);
            }}
          ></input>
        </label>
        <label>
          Date:
          <input
            type="number"
            onChange={(event) => {
              setDate(event.target.value);
            }}
          ></input>
        </label>
        <label>
          Time:
          <input
            type="number"
            onChange={(event) => {
              setTime(event.target.value);
            }}
          ></input>
        </label>
      </form>
      <button onClick={handleSubmit}>schedule</button>
    </div>
  );
};
export default VisitorView;