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",
        backgroundColor: "#af000d",
        width: "70%",
        height: "60%",
        alignSelf: "center",
      }}
    >
      <Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
        Upcoming meetings
      </Typography>
      {/* <Divider color="indianred" /> */}
      <List sx={{ maxHeight: "100%", overflow: "auto" }}>
        {meetings.map((meeting, i) => (
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              height: "50px",
              px: "10px",
              backgroundColor: i % 2 ? "mistyrose" : "white",
            }}
            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;