import React from "react";
import PropTypes from "prop-types";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
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 Spinner from "../../../components/common/Spinner";
import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
import { Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white
  },
  body: {
    fontSize: 14
  }
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

const useStyles = makeStyles({
  table: {
    minWidth: 700
  }
});

const SessionForwardsComponent = ({ session, forwards }) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <Grid container>
      <Grid item xs={12} sm={12} md={12}>
        {!forwards || forwards.loading ? (
          <Spinner />
        ) : (
          forwards.loaded && (
            <TableContainer component={Paper}>
              <Table
                className={classes.table}
                size="small"
                aria-label="customized table"
              >
                <TableHead>
                  <TableRow>
                    <StyledTableCell />
                    <StyledTableCell>
                      {t("Session.Details.From")}
                    </StyledTableCell>
                    <StyledTableCell>{t("Session.Details.To")}</StyledTableCell>
                    <StyledTableCell align="right">
                      {t("Session.Details.Options")}
                    </StyledTableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {forwards.map((row) => (
                    <StyledTableRow key={row.forwardId}>
                      <StyledTableCell component="th" scope="row">
                        {forwards.indexOf(row) + 1}
                      </StyledTableCell>
                      <StyledTableCell>{row.from}</StyledTableCell>
                      <StyledTableCell>{row.to}</StyledTableCell>
                      <StyledTableCell align="right">
                        {row.options ? (
                          <Tooltip title={t("Session.Details.Options")}>
                            <IconButton aria-label="options" size="small">
                              <DonutLargeRoundedIcon color="primary" />
                            </IconButton>
                          </Tooltip>
                        ) : (
                          ""
                        )}
                      </StyledTableCell>
                    </StyledTableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          )
        )}
      </Grid>
      <Grid item xs={12} sm={12} md={12}>
        <br />
      </Grid>
      <Grid item xs={12} sm={12} md={12}>
        <SessionForwardsHeaderComponent session={session} />
      </Grid>
    </Grid>
  );
};

SessionForwardsComponent.propTypes = {
  session: PropTypes.object.isRequired,
  forwards: PropTypes.array
};

export default SessionForwardsComponent;