import {
  Box,
  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 { getMeetingStatus } from "../Utils";
import UserLite from "../../../api-bodies/UserLite";

interface Props {
  meeting: DetailedMeeting;
}

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

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        width: "80%",
        alignSelf: "center",
        mt: 2,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "70%",
          height: "100%",
        }}
      >
        <Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
        <Typography>Status: {getMeetingStatus(props.meeting)}</Typography>
        <Typography>
          Topic: Lorem Ipsum is simply dummy text of the printing and
          typesetting industry. Lorem Ipsum has been the industrys standard
          dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
          text of the printing and typesetting industry. Lorem Ipsum has been
          the industrys standard dummy text ever since the 1500s.
        </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;