import { Box, Button, IconButton, Typography } from "@mui/material";
import React from "react";
import PhoneIcon from "@mui/icons-material/Phone";
import VideocamIcon from "@mui/icons-material/Videocam";
import GroupsIcon from "@mui/icons-material/Groups";
import AddIcon from "@mui/icons-material/Add";
import UserLite from "../../../../api-bodies/UserLite";
import UserStatus from "../../../../api-bodies/UserStatus";
import { useAppSelector, useAppDispatch } from "../../../../redux/hooks";
import {
  selectUserStatus,
  selectMeeting,
} from "../../../../redux/slices/meetingsAndUserStatusSlice";
import {
  selectFavorites,
  addFavorite,
  removeFavorite,
} from "../../../../redux/slices/favoritesSlice";
import RemoveIcon from "@mui/icons-material/Remove";
import { MeetingStatus } from "../../../../utils";
import { selectMe } from "../../../../redux/slices/usersSlice";

interface Props {
  contactInfo: UserLite;
}

const UpperBody: React.FC<Props> = (props) => {
  const dispatch = useAppDispatch();
  const userStatus: UserStatus = useAppSelector((state) =>
    selectUserStatus(state, props.contactInfo.uuid)
  );
  const me = useAppSelector(selectMe);
  const favoritesUuids = useAppSelector(selectFavorites);
  const detailedMeeting = useAppSelector((state) =>
    selectMeeting(state, userStatus.meetingId)
  );
  const meetingStatus: MeetingStatus =
    userStatus && userStatus.inMeeting
      ? MeetingStatus.IN_MEETING
      : MeetingStatus.NOT_IN_MEETING;
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        border: 1,
        borderRadius: 2,
        borderColor: "#af000d",
        width: "70%",
        alignSelf: "center",
        mb: 2,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          mx: 4,
        }}
      >
        <Typography sx={{ pt: 2 }} variant="h3">{props.contactInfo.name}</Typography>
        {!favoritesUuids.includes(props.contactInfo.uuid) ? (
          <Button
            variant="outlined"
            color="success"
            startIcon={<AddIcon />}
            onClick={() =>
              dispatch(
                addFavorite({ userId: me, toBeAdded: props.contactInfo.uuid })
              )
            }
          >
            favorites
          </Button>
        ) : (
          <Button
            variant="contained"
            color="secondary"
            startIcon={<RemoveIcon />}
            onClick={() =>
              dispatch(
                removeFavorite({
                  userId: me,
                  toBeRemoved: props.contactInfo.uuid,
                })
              )
            }
          >
            favorites
          </Button>
        )}
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          my: 2,
          mx: 4,
        }}
      >
        <Box>
          <IconButton
            sx={{ border: 1, backgroundColor: "white", mr: 1 }}
            size="large"
            color="secondary"
          >
            <PhoneIcon fontSize="large" />
          </IconButton>
          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
            <VideocamIcon fontSize="large" />
          </IconButton>
          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
            <GroupsIcon fontSize="large" />
          </IconButton>
        </Box>
        <Box sx={{ display: "flex", flexDirection: "column" }}>
          <Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
          {detailedMeeting ? (
            <Typography variant="h6">{detailedMeeting.topic}</Typography>
          ) : null}
        </Box>
      </Box>
    </Box>
  );
};

export default UpperBody;