Untitled

// @flow
import React from "react";
import {
  InputLabel,
  CircularProgress,
  FormControl,
  Box,
  Avatar,
  Typography,
  TextField,
} from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete";
import useUserData from "../../hooks/user/useUserData";
import { getAllUsers } from "../../api/requests";
import { useQuery } from "react-query";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const ChatMessagesContainerHeader = ({
  triggerSrc,
  selectedUserInfo,
  onNewReceiversSelected,
}) => {
  const {
    id: selectedReceiverId,
    name: selectedReceiverName,
    imageUrl: selectedReceiverImageUrl,
  } = selectedUserInfo;
  const { accessCode } = useUserData();
  const {
    data: msgReceivers,
    isLoading,
    error,
  } = useQuery(["getAllUsers", accessCode], getAllUsers, {
    enabled: triggerSrc === "new-chat-button-clicked", // Initially disabled
  });

  if (error) {
    console.error("Error fetching users:", error);
  }

  return (
    <Box
      sx={{
        zIndex: 1,
        boxShadow: "0px 0px 15px rgba(0, 0, 0, 0.15)",
        backgroundColor: "transparent",
      }}
    >
      {selectedReceiverId ? (
        <Box
          sx={{
            fontWeight: "bold",
            fontSize: "18px",
            height: "73px",
            display: "flex",
            alignItems: "center",
            marginBottom: "16px",
            marginLeft: "8px",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "10px",
              marginLeft: 2,
            }}
          >
            <Avatar src={selectedReceiverImageUrl} />
            <Typography component="div" fontWeight="bold">
              {selectedReceiverName}
            </Typography>
          </Box>
        </Box>
      ) : (
        <FormControl sx={{ m: 1, width: "calc(100% - 32px)" }}>
          <Autocomplete
            id="msg-receivers-dropdown"
            options={msgReceivers || []}
            getOptionLabel={(option) =>
              `${option.firstname} ${option.lastname}`
            }
            onChange={(event, newValue) => {
              onNewReceiversSelected({
                recieverId: newValue ? newValue.id : "",
                receiverFullName: newValue
                  ? `${newValue.firstname} ${newValue.lastname}`
                  : "",
                receiverImageUrl: newValue ? newValue.imageUrl : "",
              });
            }}
            loading={isLoading}
            noOptionsText="Δεν βρέθηκαν επιλογές"
            renderInput={(params) => (
              <TextField
                {...params}
                label="Προς"
                variant="outlined"
                InputProps={{
                  ...params.InputProps,
                  endAdornment: (
                    <>
                      {isLoading ? (
                        <CircularProgress color="inherit" size={20} />
                      ) : null}
                      {params.InputProps.endAdornment}
                    </>
                  ),
                }}
              />
            )}
            renderOption={(props, option) => (
              <li {...props}>
                <Avatar src={option.imageUrl} sx={{ mr: 1 }} />
                {`${option.firstname} ${option.lastname}`}
              </li>
            )}
            sx={{
              "& .MuiAutocomplete-listbox": {
                "*::-webkit-scrollbar": {
                  width: "8px",
                },
                "*::-webkit-scrollbar-thumb": {
                  backgroundColor: "#888",
                  borderRadius: "4px",
                },
                "*::-webkit-scrollbar-thumb:hover": {
                  backgroundColor: "#555",
                },
              },
            }}
          />
        </FormControl>
      )}
    </Box>
  );
};

export default ChatMessagesContainerHeader;