import { Box, Chip, Divider, Typography } from "@mui/material";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import MessagesRecivers from "../features/messages/components/messages-recivers/MessagesRecivers";
import MessagesSenders from "../features/messages/components/messages-senders/MessagesSenders";
import { messagesGetReciverMessages } from "../features/messages/services/messages-get-reciver-messages";
import { messagesGetSenderMessages } from "../features/messages/services/messages-get-sender-messages";

const Messages = () => {
  const { senderMessages } = useSelector((state) => state.messageSlice);
  const { reciverMessages } = useSelector((state) => state.messageSlice);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(messagesGetSenderMessages());
    dispatch(messagesGetReciverMessages());
  }, []);

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <Grid justifyContent="center" my={SPACING.MEDIUM}>
            {!senderMessages?.length && !reciverMessages?.length && (
              <Typography variant="body1" color="primary">
                در حال حاضر پیامی جهت نمایش وجود ندارد!
              </Typography>
            )}
            {senderMessages?.length ? (
              <Divider>
                <Chip label="پیام های همگانی" />
              </Divider>
            ) : (
              ""
            )}

            <Grid p={SPACING.SMALL}>
              {senderMessages?.map((item, i) => {
                return (
                  <MessagesSenders
                    key={i}
                    number={i}
                    heading={item.heading}
                    message={item.message}
                    link={item.link}
                    linkText={item.linkText}
                    image={item.image}
                    time={item.time}
                  />
                );
              })}
            </Grid>
          </Grid>

          <Grid justifyContent="center">
            {reciverMessages?.length ? (
              <Divider>
                <Chip label="پیام های شما" />
              </Divider>
            ) : (
              ""
            )}

            <Grid p={SPACING.SMALL}>
              {reciverMessages?.map((item, i) => {
                return (
                  <MessagesRecivers
                    key={i}
                    number={i}
                    heading={item.heading}
                    message={item.message}
                    link={item.link}
                    linkText={item.linkText}
                    image={item.image}
                    time={item.time}
                  />
                );
              })}
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default Messages;
