import React from "react";
import PropTypes from "prop-types";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";

const styles = {
  bullet: {
    display: "inline-block",
    margin: "0 4px",
    transform: "scale(1.5)"
  },
  service: {
    marginTop: 1
  }
};

const buttons = [
  {
    code: "About.System.Services.Frontend",
    url: "https://lab.code-rove.com/gitea/tudor.stanciu/network-resurrector/src/branch/master/frontend"
  },
  {
    code: "About.System.Services.Api",
    url: "https://lab.code-rove.com/gitea/tudor.stanciu/network-resurrector"
  },
  {
    code: "About.System.Services.Server",
    url: "https://lab.code-rove.com/gitea/tudor.stanciu/network-resurrector"
  },
  {
    code: "About.System.Services.Tuitio",
    url: "https://lab.code-rove.com/gitea/tudor.stanciu/tuitio"
  }
];

const AboutSystemComponent = ({ onOpenInNewTab }) => {
  const { t } = useTranslation();

  const bullet = <span style={styles.bullet}>•</span>;

  return (
    <Card variant="outlined">
      <CardContent>
        <Typography variant="h5" gutterBottom>
          {t("About.System.Description.Title")}
        </Typography>
        <Typography color="textSecondary">{t("About.System.Description.FirstPhrase")}</Typography>
        <Typography color="textSecondary">{t("About.System.Description.SecondPhrase")}</Typography>

        <Typography sx={styles.service} color="textSecondary">
          {bullet}
          {t("About.System.Description.Frontend")}
        </Typography>
        <Typography sx={styles.service} color="textSecondary">
          {bullet}
          {t("About.System.Description.Api")}
        </Typography>
        <Typography sx={styles.service} color="textSecondary">
          {bullet}
          {t("About.System.Description.Server")}
        </Typography>
        <Typography sx={styles.service} color="textSecondary">
          {bullet}
          {t("About.System.Description.Agent")}
        </Typography>
        <Typography sx={styles.service} color="textSecondary">
          {bullet}
          {t("About.System.Description.Tuitio")}
        </Typography>
      </CardContent>
      <CardActions>
        {buttons.map(button => (
          <Button
            key={button.code}
            size="small"
            color="primary"
            startIcon={<OpenInNewIcon />}
            onClick={onOpenInNewTab(button.url)}
          >
            {t(button.code)}
          </Button>
        ))}
      </CardActions>
    </Card>
  );
};

AboutSystemComponent.propTypes = {
  onOpenInNewTab: PropTypes.func.isRequired
};

export default AboutSystemComponent;
