import React, { useMemo } from "react";
import { List, ListItem, ListItemText, ListItemAvatar, styled } from "@mui/material";
import Avatar from "@mui/material/Avatar";
import WebAssetIcon from "@mui/icons-material/WebAsset";
import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard";
import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
import { useTranslation } from "react-i18next";
import packageData from "../../../../package.json";
import Paper from "@mui/material/Paper";
import { dtos } from "types";

const VersionAvatar = styled(Avatar)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main
}));

const VersionLabel = styled("span")(({ theme }) => ({
  fontSize: "0.9rem",
  fontWeight: theme.typography.fontWeightMedium
}));

type Props = {
  data: dtos.SystemVersion;
};

const SystemVersionComponent: React.FC<Props> = ({ data }) => {
  const { t } = useTranslation();

  const lastReleaseDate = useMemo(() => {
    const format = "DD-MM-YYYY HH:mm:ss";
    const server = t("DATE_FORMAT", {
      date: {
        value: data.server.lastReleaseDate,
        format
      }
    });

    const api = t("DATE_FORMAT", {
      date: {
        value: data.api.lastReleaseDate,
        format
      }
    });

    const frontend = t("DATE_FORMAT", {
      date: {
        value: import.meta.env.APP_DATE ?? new Date(),
        format
      }
    });

    return { server, api, frontend };
  }, [data, t]);

  return (
    <Paper variant="outlined">
      <List
        sx={{
          display: { xs: "block", md: "flex" },
          flexDirection: { md: "row" },
          padding: 0,
          width: "100%"
        }}
      >
        <ListItem>
          <ListItemAvatar>
            <VersionAvatar>
              <DeveloperBoardIcon />
            </VersionAvatar>
          </ListItemAvatar>
          <ListItemText
            primary={
              <VersionLabel>
                {t("About.System.Version.Server", {
                  version: data.server.version
                })}
              </VersionLabel>
            }
            secondary={t("About.System.Version.LastReleaseDate", {
              date: lastReleaseDate.server
            })}
          />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <VersionAvatar>
              <SettingsInputSvideoIcon />
            </VersionAvatar>
          </ListItemAvatar>
          <ListItemText
            primary={
              <VersionLabel>
                {t("About.System.Version.Api", {
                  version: data.api.version
                })}
              </VersionLabel>
            }
            secondary={t("About.System.Version.LastReleaseDate", {
              date: lastReleaseDate.api
            })}
          />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <VersionAvatar>
              <WebAssetIcon />
            </VersionAvatar>
          </ListItemAvatar>
          <ListItemText
            primary={
              <VersionLabel>
                {t("About.System.Version.Frontend", {
                  version: import.meta.env.APP_VERSION ?? packageData.version
                })}
              </VersionLabel>
            }
            secondary={t("About.System.Version.LastReleaseDate", {
              date: lastReleaseDate.frontend
            })}
          />
        </ListItem>
      </List>
    </Paper>
  );
};

export default SystemVersionComponent;
