import React from "react";
import PropTypes from "prop-types";
import Timeline from "@mui/lab/Timeline";
import TimelineItem from "@mui/lab/TimelineItem";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
import TimelineDot from "@mui/lab/TimelineDot";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import { getRandomElement } from "../../../utils";
import {
  Announcement,
  Book,
  Apps,
  BugReport,
  DeviceHub,
  Equalizer,
  FilterTiltShift,
  Grain,
  Layers,
  LocalOffer,
  Memory,
  NetworkCheck,
  OfflineBolt,
  Star,
  Whatshot,
  Widgets
} from "@mui/icons-material";

const timelineIcons = [
  Announcement,
  Book,
  Apps,
  BugReport,
  DeviceHub,
  Equalizer,
  FilterTiltShift,
  Grain,
  Layers,
  LocalOffer,
  Memory,
  NetworkCheck,
  OfflineBolt,
  Star,
  Whatshot,
  Widgets
];

const timelineDotVariants = [
  { color: "primary", variant: "outlined" },
  { color: "secondary", variant: "outlined" }
];

const TimelineComponent = ({ releases }) => {
  const { t } = useTranslation();

  const _releases = releases.map((release, index) => {
    const isLast = index === releases.length - 1;
    const icon = getRandomElement(timelineIcons);
    const dot = getRandomElement(timelineDotVariants);
    return { ...release, isLast, icon, dot };
  });

  return (
    <Timeline position="alternate">
      {_releases.map(release => (
        <TimelineItem key={release.version}>
          <TimelineOppositeContent>
            <Typography variant="body2" color="textSecondary">
              {t("DATE_FORMAT", {
                date: { value: release.date, format: "DD-MM-YYYY HH:mm" }
              })}
            </Typography>
            <Typography variant="body2" color="textSecondary">
              {t("About.ReleaseNotes.Version")}: {release.version}
            </Typography>
          </TimelineOppositeContent>
          <TimelineSeparator>
            <TimelineDot color={release.dot.color} variant={release.dot.variant}>
              <release.icon />
            </TimelineDot>
            {!release.isLast && <TimelineConnector />}
          </TimelineSeparator>
          <TimelineContent>
            <Paper
              elevation={3}
              sx={{
                padding: "6px 16px"
              }}
            >
              <Typography variant="h6" component="h1">
                {release.notes[0]}
              </Typography>
              {release.notes.slice(1).map((note, index) => (
                <Typography key={index} variant="body2">
                  {note}
                </Typography>
              ))}
            </Paper>
          </TimelineContent>
        </TimelineItem>
      ))}
    </Timeline>
  );
};

TimelineComponent.propTypes = {
  releases: PropTypes.array.isRequired
};

export default TimelineComponent;
