import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
import Calendar from "../common/Calendar";
import DateDetails from "../common/DateDetails";
import ApptDetails from "./ApptDetails";
import AppointmentService from "../../service/AppointmentService";

const Dashboard = () => {
  const { user: currentUser } = useSelector((state) => state.auth);
  const [allAppointments, setAllAppointments] = useState([]);
  const [apptsForMonth, setApptsForMonth] = useState([]);
  const [date, setDate] = useState({
    month: new Date().getMonth(),
    year: new Date().getFullYear(),
    day: new Date().getDate(),
  });
  const [apptsForDate, setApptsForDate] = useState([]);
  const [apptsForPerson, setApptsForPerson] = useState([]);

  useEffect(() => {
    AppointmentService.getAppointmentsForUser(
      currentUser.id,
      currentUser.accessToken
    ).then((response) => {
      setAllAppointments([...response.data]);
      console.log(currentUser.accessToken);
    });
  }, [currentUser]);

  useEffect(() => {
    const temp = [];
    for (const appt of allAppointments) {
      if (parseInt(appt.date.toString().substring(4, 6)) === date.month + 1) {
        temp.push(appt);
      }
    }
    setApptsForMonth(temp);
  }, [date.month, allAppointments]);

  //redirect to Login
  if (!currentUser) {
    return <Navigate to="/login" />;
  }

  const changeMonth = (direction) => {
    if (direction === "forward" && date.month !== 11) {
      setDate({ ...date, month: date.month + 1 });
    } else if (direction === "forward" && date.month === 11) {
      setDate({ month: 0, year: date.year + 1 });
    } else if (direction === "backward" && date.month !== 0) {
      setDate({ ...date, month: date.month - 1 });
    } else if (direction === "backward" && date.month === 0) {
      setDate({ month: 11, year: date.year - 1 });
    }
    setApptsForDate([]);
  };

  const onSelectPerson = (appointment) => {
    //deselect previously selected person
    const prevSelectedPersons =
      document.getElementsByClassName("person-selected");
    for (let i = 0; i < prevSelectedPersons.length; i++) {
      prevSelectedPersons[i].className = "person";
    }
    document.getElementById(appointment.email).className = "person-selected";

    onSelectDate(appointment.date % 100);
    setApptsForPerson(appointment);
    showApptDetails();
  };

  const onSelectDate = (day) => {
    setDate({ ...date, day: day });
    //deselect previously selected date
    const prevSelectedDates = document.getElementsByClassName(
      "calendar-day-box-selected"
    );
    for (let i = 0; i < prevSelectedDates.length; i++) {
      prevSelectedDates[i].className = "calendar-day-box";
    }
    document.getElementById(day).className = "calendar-day-box-selected";

    //check for appts on selected date
    const temp = [];
    for (const apt of allAppointments) {
      if (apt.date === formatSelectedDayToFullDate(day.toString())) {
        temp.push(apt);
      }
    }
    setApptsForDate(temp);
  };

  const onSelectTime = (time) => {
    for (const appt of apptsForDate) {
      if (appt.time === time) {
        setApptsForPerson(appt);
        showApptDetails();
      }
    }
  };

  const formatSelectedDayToFullDate = (selectedDay) => {
    const year = date.year.toString();
    const month =
      (date.month + 1).toString().length < 2
        ? "0" + (date.month + 1).toString()
        : (date.month + 1).toString();
    const day = selectedDay.length < 2 ? "0" + selectedDay : selectedDay;
    return parseInt(year + month + day);
  };

  const showApptDetails = () => {
    const modal = document.getElementById("apptDetails");
    modal.style.display = "block";
  };

  return (
    <div className="dashboard-container">
      <ApptDetails appointment={apptsForPerson} />
      <div className="people-container">
        <h2 className="section-subtitle">People</h2>
        <div className="people-list">
          {apptsForMonth.map((appointment) => (
            <div
              className="person"
              id={appointment.email}
              key={appointment.email}
              onClick={() => onSelectPerson(appointment)}
            >
              <div className="circle" />
              <div className="section-detail" style={{ textAlign: "left" }}>
                {appointment.firstName} {appointment.lastName}
                <br /> Appt Reason
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="generic-column-20px" style={{ alignItems: "flex-start" }}>
        <h1 className="section-title">{currentUser.username}</h1>
        <p className="section-paragraph">
          Here are your appointments for this month
        </p>
        <div className="calendar-and-details">
          <Calendar
            month={date.month}
            year={date.year}
            changeMonth={(direction) => changeMonth(direction)}
            onSelectDate={(date) => onSelectDate(date)}
          />
          <DateDetails
            date={date}
            apptsForDate={apptsForDate}
            onSelectTime={(time) => onSelectTime(time)}
          />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;