import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import AccountService from "../../service/AccountService";
import AppointmentService from "../../service/AppointmentService";

function OwnerView(props) {
  const [user, setUser] = useState({});
  const navigate = useNavigate();

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

  const handleLogout = () => {
    AccountService.logout(user);
    navigate("/login");
  };

  const handleDeny = (id) => {
    AppointmentService.deleteAppointment(id);
  };

  return (
    <div>
      <button
        onClick={() => {
          handleLogout();
        }}
      >
        logout
      </button>
      <div>&nbsp;</div>
      <div>Appointments:</div>
      {user.appointments?.map((appointment) => (
        <div key={appointment.appointmentId}>
          {JSON.stringify(appointment)}
          <button
            onClick={() => {
              handleDeny(appointment.appointmentId);
            }}
          >
            deny
          </button>
        </div>
      ))}
    </div>
  );
}

export default OwnerView;