import Meeting from "./Meeting";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import { useState, useEffect } from "react";
import { useAppSelector } from "../../redux/hooks";
import { selectMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
import { selectUsers } from "../../redux/slices/usersSlice";
import { formatTimeFromDate } from "../../utils";
import UserLite from "../../api-bodies/UserLite";


const EmptyMeetingsList: React.FC = () => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        width: "100%",
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* <Box>
      </Box> */}
      <Box>
        <Typography>
          No Meetings in Progress
        </Typography>
      </Box>
      <Box>
        <Typography>
          Click the buttons on the right to create a meeting
        </Typography>
      </Box>
    </Box>
  );
}

const MeetingsList: React.FC = () => {
  const meetings = useAppSelector(selectMeetings);
  const uuids: string[] = [];
  meetings.forEach((meeting) => {
    meeting.liveParticipantIds.forEach((uuid) => {
      if (!uuids.includes(uuid)) {
        uuids.push(uuid);
      }
    });
  });

  const participants = useAppSelector((state) => selectUsers(state, uuids));

  // const participants: (UserLite | undefined)[] = [];
  // uuids.forEach((uuid) => {
  //   const userLite = useAppSelector((state) =>
  //     selectUser(state,uuid)
  //   );
  //   participants.push(userLite);
  // });

  const [currentDate, setCurrentDate] = useState<Date>(new Date());

  useEffect(() => {
    setInterval(() => setCurrentDate(new Date()), 1000);
  }, []);

  let i = 1;
  return (
    <>
    <List style={{ maxHeight: "100%", overflow: "auto" }}>
      {meetings.map((meeting) => {
        const meetingMembers: UserLite[] = [];
        participants.forEach((userLite) => {
          if (
            userLite != undefined &&
            meeting.liveParticipantIds.includes(userLite.uuid)
          ) {
            meetingMembers.push(userLite);
          }
        });
        const startDate = new Date(meeting.startTime);
        const startDatemil = startDate.getTime();
        const endDatemil = startDatemil + meeting.duration * 60000;
        const endDate = new Date(endDatemil);
  
        const currentDatemil = currentDate.getTime();
  
        const meetingMembersString = () => {
          if (meetingMembers.length > 3) {
            return (
              "Participants: " +
              meetingMembers[0].name +
              ", " +
              meetingMembers[1].name +
              ", " +
              meetingMembers[2].name +
              ", and " +
              (meetingMembers.length - 3).toString() +
              " more..."
            );
          } else {
            return (
              "Participants: " +
              meetingMembers.map((userLite) => " " + userLite.name).toString()
            );
          }
        };
        console.log(meetingMembersString);
        if ((currentDatemil >= startDatemil && currentDatemil <= endDatemil) || meeting.liveParticipantIds.length > 0) {
          const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
          i += 1;
          return (
            <Meeting
              meeting={meeting}
              meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
              meetingName={meeting.topic}
              meetingTime={
                formatTimeFromDate(startDate) +
                " - " +
                formatTimeFromDate(endDate)
              }
              meetingMembers={meetingMembers
                .map((userLite) => " " + userLite.name + " ")
                .toString()}
            />
          );
        }
      })}
    </List>
    {i === 1 ?  <EmptyMeetingsList /> : <></>}
    </>
  );
}

const MeetingsPanel: React.FC = () => {

  return (
    <div className="meetings-panel">
      <div className="row panel-label">
        <Typography
          className="mylabel"
          variant="h5"
          sx={{ color: "white", ml: 1 }}
        >
          Meetings in progress
        </Typography>
      </div>
      <MeetingsList />
    </div>
  );
};

export default MeetingsPanel;