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 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";
import styles from "../styles/tableStyles";
import {
  StyledTableCell,
  StyledTableRow
} from "../../../components/common/MaterialTable";

const useStyles = makeStyles(styles);

const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => {
  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.Forwards.From")}
                    </StyledTableCell>
                    <StyledTableCell>
                      {t("Session.Forwards.To")}
                    </StyledTableCell>
                    <StyledTableCell align="right">
                      {t("Session.Forwards.Options.Title")}
                    </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.Forwards.Options.Title")}>
                            <IconButton
                              aria-label="options"
                              size="small"
                              onClick={openOptionsDialog({
                                ...row.options,
                                title: `${row.from} >>> ${row.to}`
                              })}
                            >
                              <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,
  openOptionsDialog: PropTypes.func.isRequired
};

export default SessionForwardsComponent;