import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
} from "@mui/lab";
import { Typography } from "@mui/material";
import { PropTypes } from "prop-types";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { formatTime } from "../../../../utils/formatTime";
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";

export const TicketCustomerItem = ({ item }) => {
  return (
    <TimelineItem>
      <TimelineSeparator>
        <TimelineDot color="warning">
          <QuestionMarkIcon fontSize="small" />
        </TimelineDot>
        <TimelineConnector />
      </TimelineSeparator>
      <Grid container direction="column" mt={1}>
        <TimelineContent>
          <Grid container gap={SPACING.TINY}>
            <Typography variant="body1" fontWeight="bold">
              {item.title}
            </Typography>
            <Typography variant="body1">-</Typography>
            <Typography
              variant="body1"
              color={(prop) => prop.palette.grey["A700"]}
            >
              {formatTime(item.createDate)}
            </Typography>
          </Grid>
        </TimelineContent>
        <TimelineContent>
          <Grid container direction="column" gap={SPACING.SMALL}>
            <Grid>
              <Typography varinat="body2">{item.content}</Typography>
            </Grid>
            {Boolean(item.image?.length) && (
              <>
                <Grid>
                  <Typography
                    varinat="body1"
                    color={(prop) => prop.palette.grey["A700"]}
                  >
                    پیوست ها
                  </Typography>
                </Grid>
                <Grid container gap={SPACING.SMALL}>
                  {item.image.map((img, i) => {
                    return (
                      <a key={"ticket-img" + i} href={img}>
                        <img
                          src={img}
                          width="100"
                          alt="ticket"
                          style={{ borderRadius: "10px" }}
                        />
                      </a>
                    );
                  })}
                </Grid>
              </>
            )}
          </Grid>
        </TimelineContent>
      </Grid>
    </TimelineItem>
  );
};

TicketCustomerItem.propTypes = {
  item: PropTypes.any,
};
