import React from "react";
import PropTypes from "prop-types";
import { Grid, Typography, Link } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
import styles from "../../../components/common/styles/gridStyles";

const useStyles = makeStyles(styles);

const ServerSummary = ({
  data,
  serverHost,
  handleOpenInNewTab,
  summonWizard
}) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <Grid container>
      <Grid item xs={6} sm={3} md={3}>
        {`${t("Server.Domain")}: `}
        <span className={classes.value}>{data.domain.name}</span>
      </Grid>

      <Grid item xs={6} sm={3} md={3}>
        {`${t("Server.ServerHostName")}: `}
        <span className={classes.value}>{serverHost || ""}</span>
      </Grid>

      <Grid item xs={6} sm={3} md={3}>
        {`${t("Server.ApiHostName")}: `}
        <span className={classes.value}>{data.hosts.api}</span>
      </Grid>

      <Grid item xs={6} sm={3} md={3}>
        {`${t("Server.DDNSProvider")}: `}
        <Link
          href="#"
          onClick={handleOpenInNewTab(data.domain.provider.url)}
          variant="subtitle1"
        >
          {data.domain.provider.name}
        </Link>
      </Grid>

      <Grid item xs={12} sm={12} md={12}>
        <Typography variant="body2" gutterBottom color="textSecondary">
          {t("Server.Thoughts")}
          <Link href="#" onClick={summonWizard} variant="body2">
            {t("Server.Wizard")}
          </Link>
          .
        </Typography>
      </Grid>
    </Grid>
  );
};

ServerSummary.propTypes = {
  data: PropTypes.object.isRequired,
  serverHost: PropTypes.string,
  handleOpenInNewTab: PropTypes.func.isRequired,
  summonWizard: PropTypes.func.isRequired
};

export default ServerSummary;