import { Box, Button, List, Typography } from "@mui/material";
import React from "react";
import UserLite from "../../../../api-bodies/UserLite";
import { useAppSelector, useAppDispatch } from "../../../../redux/hooks";
import { open } from "../../../../redux/slices/meetingDetailsOpenSlice";
import { selectUserUpcomingMeetings } from "../../../../redux/slices/meetingsAndUserStatusSlice";
import { getUpcomingMeetingTime } from "../../Utils";

interface Props {
  contactInfo: UserLite;
}

const LowerBody: React.FC<Props> = (props) => {
  const dispatch = useAppDispatch();

  const meetings = useAppSelector((state) =>
    selectUserUpcomingMeetings(state, props.contactInfo.uuid)
  );

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        border: 1,
        borderRadius: 2,
        borderColor: "#af000d",
        width: "70%",
        height: "60%",
        alignSelf: "center",
      }}
    >
      <Typography
        sx={{ color: "white", my: 1 }}
        variant="h4"
        textAlign="center"
      >
        Upcoming meetings
      </Typography>
      {meetings.length === 0 ? (
        <Typography
          variant="h5"
          textAlign="center"
          sx={{ position: "relative", top: "30%" }}
        >
          No upcoming meetings today
        </Typography>
      ) : (
        <List sx={{ maxHeight: "100%", overflow: "auto" }}>
          {meetings.map((meeting, i) => (
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                height: "50px",
                px: "10px",
                borderTop: 1,
                borderBottom: i === meetings.length - 1 ? 1 : 0,
              }}
              key={i}
            >
              <Button
                variant="text"
                color="info"
                onClick={() => dispatch(open(meeting))}
              >
                {meeting.topic}
              </Button>
              <Typography sx={{ pt: 1.5 }}>
                {getUpcomingMeetingTime(meeting)}
              </Typography>
            </Box>
          ))}
        </List>
      )}
    </Box>
  );
};

export default LowerBody;