import {
  Box,
  Divider,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Typography,
} from "@mui/material";
import React from "react";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
import { useAppSelector } from "../../../redux/hooks";
import { selectUsers } from "../../../redux/slices/usersSlice";
import UserLite from "../../../api-bodies/UserLite";

enum MeetingStatus {
  Live = "Live",
  Scheduled = "Scheduled",
  Finished = "Finished",
}

interface Props {
  meeting: DetailedMeeting;
}

const getMeetingStatus = (meeting: DetailedMeeting) => {
  const startDate = new Date(meeting.startTime);
  const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
  const currentDate = new Date();
  if (meeting.liveParticipantIds.length === 0) {
    if (startDate.getTime() - currentDate.getTime() > 0)
      return MeetingStatus.Scheduled;
    else if (endDate.getTime() - currentDate.getTime() > 0)
      return MeetingStatus.Live;
    else return MeetingStatus.Finished;
  } else {
    return MeetingStatus.Live;
  }
};

const Body: React.FC<Props> = ({ meeting }) => {
  const registrants: UserLite[] = useAppSelector((state) =>
    selectUsers(state, meeting.registrantIds)
  );
  const liveParticipants: UserLite[] = useAppSelector((state) =>
    selectUsers(state, meeting.liveParticipantIds)
  );

  const parseIsoString = (s: string) => {
    const month = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ][parseInt(s.slice(5, 7)) - 1];
    const day = s.slice(8, 10);
    const isoTime: string = s.slice(11, 16);
    const hour: number = parseInt(isoTime.slice(0, 2));
    const hourMod: string = hour % 12 == 0 ? "12" : (hour % 12).toString();
    return (
      month +
      " " +
      day +
      ", " +
      hourMod +
      ":" +
      isoTime.slice(3, 5) +
      (hour > 11 ? "PM" : "AM")
    );
  };

  const start = meeting.startTime;
  const startDateString = parseIsoString(start);
  const listLiveParticipants = () => {
    const s: string[] = liveParticipants.map((user) => user.name + ", ");
    return s.join("").slice(0, -2);
  };

  const meetingStatus = getMeetingStatus(meeting);
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        width: "80%",
        alignSelf: "center",
        mt: 2,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "70%",
          height: "100%",
          mt: 10,
        }}
      >
        <Typography sx={{ pl: 5 }} variant="overline">
          Meeting ID: {meeting.meetingId}
        </Typography>
        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">
          {meeting.topic}
        </Typography>
        <Divider sx={{ mb: 3 }} />
        <Typography sx={{ pl: 5 }} variant="h4">
          Start: {startDateString}
        </Typography>
        <Typography sx={{ pl: 5 }} variant="h4">
          Duration: {meeting.duration.toString() + " minutes"}
        </Typography>
        <Typography sx={{ my: 1 }} />
        <Typography sx={{ pl: 5 }} variant="button">
          Currently inside: {listLiveParticipants()}
        </Typography>
        <Typography sx={{ pl: 5 }} variant="button">
          Status: {meetingStatus}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          borderLeft: 1,
          ml: 4,
        }}
      >
        <List>
          <ListItem sx={{ borderBottom: 1 }}>
            <ListItemText primary="Invited" />
          </ListItem>
          {registrants.map((registrant, i) => (
            <ListItem key={i}>
              <ListItemIcon>
                <PersonOutlineIcon />
              </ListItemIcon>
              <ListItemText primary={registrant.name} />
            </ListItem>
          ))}
        </List>
      </Box>
    </Box>
  );
};

export default Body;