import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Tooltip from "@material-ui/core/Tooltip";
import { useTranslation } from "react-i18next";
import styles from "../styles/tableStyles";
import {
  StyledTableCell,
  StyledTableRow
} from "../../../components/common/MaterialTable";
import ActiveIcon from "../../../components/common/ActiveIcon";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(styles);

const ForwardOptionsComponent = ({ options }) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <>
      <TableContainer component={Paper}>
        <Table
          className={classes.narrowTable}
          size="small"
          aria-label="customized table"
        >
          <TableHead>
            <TableRow>
              <StyledTableCell>
                {t("Session.Forwards.Options.Name")}
              </StyledTableCell>
              <StyledTableCell align="center">
                {t("Session.Forwards.Options.Active")}
              </StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <StyledTableRow>
              <Tooltip
                title={t("Session.Forwards.Options.TrailingSlashTooltip")}
              >
                <StyledTableCell>
                  {t("Session.Forwards.Options.TrailingSlash")}
                </StyledTableCell>
              </Tooltip>
              <StyledTableCell align="center">
                <ActiveIcon active={options.trailingSlash} />
              </StyledTableCell>
            </StyledTableRow>
            <StyledTableRow>
              <Tooltip
                title={t("Session.Forwards.Options.PathOverwriteTooltip")}
              >
                <StyledTableCell>
                  {t("Session.Forwards.Options.PathOverwrite")}
                </StyledTableCell>
              </Tooltip>
              <StyledTableCell align="center">
                <ActiveIcon active={options.pathOverwrite} />
              </StyledTableCell>
            </StyledTableRow>
          </TableBody>
        </Table>
      </TableContainer>
      <Typography variant="caption" display="block" gutterBottom>
        {options.title}
      </Typography>
    </>
  );
};

ForwardOptionsComponent.propTypes = {
  options: PropTypes.object.isRequired
};

export default ForwardOptionsComponent;