import React, { useState } from "react";
import { PropTypes } from "prop-types";
import {
  List,
  ListItem,
  ListItemText,
  Divider,
  Typography,
  Chip,
  Button,
  Collapse,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";

const MessagesSenders = ({
  heading,
  message,
  linkText,
  link,
  image,
  time,
  number,
}) => {
  const [isMessageVisible, setMessageVisible] = useState(false);

  const toggleMessageVisibility = () => {
    setMessageVisible(!isMessageVisible);
  };

  return (
    <List>
      <ListItem>
        <ListItemText
          primary={
            heading ? `${number + 1} - ${heading}` : `${number + 1} بدون عنوان`
          }
        />
        <Button variant="text" onClick={toggleMessageVisibility}>
          {isMessageVisible ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </Button>
      </ListItem>

      <Collapse in={isMessageVisible}>
        <ListItem>
          <Typography color="primary" textAlign="justify">
            {message ? message : "برای این پیام توضیحی نوشته نشده است"}
          </Typography>
        </ListItem>
      </Collapse>

      <ListItem>
        <Typography fontSize={13} color={"red"} mt={1} textAlign="justify">
          تاریخ ثبت پیام: {formatJustDate(time)} - ساعت {formatJustTime(time)}
        </Typography>
      </ListItem>

      {linkText && (
        <>
          <ListItem>
            <Chip label="پیوند" />
          </ListItem>

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

      <Divider />

      {image && image.length > 0 && (
        <div>
          <ListItem>
            <Chip label="تصاویر" />
          </ListItem>
          {image.map((item, i) => (
            <ListItem key={i}>
              <a href={item} style={{ textDecoration: "none" }}>
                <img src={item} alt="Slaughter Payment Factor" width="100" />
              </a>
            </ListItem>
          ))}
        </div>
      )}
    </List>
  );
};

MessagesSenders.propTypes = {
  message: PropTypes.string,
  heading: PropTypes.string,
  link: PropTypes.string,
  linkText: PropTypes.string,
  image: PropTypes.array,
  time: PropTypes.string,
  number: PropTypes.number,
};

export default MessagesSenders;
