import { Box } from "@mui/material";
import React from "react";
import Body from "./contacts-components/Body";

import Sidebar from "./contacts-components/Sidebar";
import UserLite from "../../api-bodies/UserLite";
import { useParams } from "react-router-dom";
import { selectUser } from "../../redux/slices/usersSlice";
import { useAppSelector } from "../../redux/hooks";
import EmptyBody from "./contacts-components/EmptyBody";

const Contacts: React.FC = () => {
  const { uuid } = useParams();
  const uriContact: UserLite | undefined = useAppSelector((state) =>
    selectUser(state, uuid)
  );

  return (
    <Box
      sx={{
        display: "flex",
        height: "100%",
      }}
    >
      <Sidebar />
      {uriContact ? <Body contactSelected={uriContact} /> : <EmptyBody />}
    </Box>
  );
};

export default Contacts;
