import React from "react";

import { PropTypes } from "prop-types";

import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

import { Accordion, Chip, Divider, Typography } from "@mui/material";

import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";

const MessagesRecivers = ({
  heading,
  message,
  linkText,
  link,
  image,
  time,
  number,
}) => {
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography>
          {heading ? number + 1 + " - " + heading : number + 1 + " بدون عنوان "}
        </Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography color="primary" textAlign="justify">
          {message ? message : "برای این پیغام توضیحی نوشته نشده است"}
          <hr />
          <Typography mt={SPACING.SMALL} textAlign="justify">
            تاریخ ثبت پیام: {formatJustDate(time)} - ساعت {formatJustTime(time)}
          </Typography>
        </Typography>
      </AccordionDetails>
      {linkText && (
        <>
          <Divider textAlign="left">
            <Chip label="پیوند" />
          </Divider>

          <AccordionDetails>
            <a style={{ textDecoration: "none" }} href={link}>
              {linkText}
            </a>
          </AccordionDetails>
        </>
      )}

      {image?.length ? (
        <Divider textAlign="left">
          <Chip label="تصاویر" />
        </Divider>
      ) : (
        ""
      )}

      {image?.length
        ? image.map((item, i) => {
            return [
              <Grid key={i} display="inline-block" p={SPACING.SMALL}>
                <a key={`SlaughterPaymentFactorImage`} href={item}>
                  <img src={item} alt="Slaughter Payment Factor" width="100" />
                </a>
              </Grid>,
            ];
          })
        : ""}
    </Accordion>
  );
};
MessagesRecivers.propTypes = {
  message: PropTypes.string,
  heading: PropTypes.string,
  link: PropTypes.string,
  linkText: PropTypes.string,
  image: PropTypes.any,
  time: PropTypes.string,
  number: PropTypes.any,
};
export default MessagesRecivers;
