import { Box, Button, Chip, Divider, Typography } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";

import * as React from "react";

import { DRAWER } from "../lib/redux/slices/appSlice";

import ProvinceSubmitMessage from "../features/province/components/province-submit-message/ProvinceSubmitMessage";
import { useDispatch, useSelector } from "react-redux";
import { messagesGetSenderMessages } from "../features/messages/services/messages-get-sender-messages";
import { useEffect } from "react";
import MessagesSenders from "../features/messages/components/messages-senders/MessagesSenders";
import { provinceGetUserProfiles } from "../features/province/services/province-get-user-profiles";
// import { useState } from "react";

const ProvinceSendMessage = () => {
  const dispatch = useDispatch();

  const { senderMessages } = useSelector((state) => state.messageSlice);

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

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
          my={SPACING.MEDIUM}
        >
          <Grid container mt={SPACING.MEDIUM}>
            <Button
              className="first-step"
              variant={"contained"}
              onClick={() => {
                dispatch(
                  DRAWER({
                    title: "ارسال پیام جدید",
                    right: !(window.innerWidth <= 600),
                    bottom: window.innerWidth <= 600,
                    content: <ProvinceSubmitMessage />,
                  })
                );
              }}
            >
              ثبت پیام جدید
            </Button>
          </Grid>

          <Divider>
            <Chip size="small" label="پیام های استان" />
          </Divider>

          {!senderMessages?.length && (
            <Grid mt={SPACING.SMALL}>
              <Typography variant="body1" color="primary">
                در حال حاضر پیامی جهت نمایش وجود ندارد!
              </Typography>
            </Grid>
          )}

          <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>
      </Box>
    </>
  );
};

export default ProvinceSendMessage;
