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

const useStyles = makeStyles(styles);

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

  return (
    <Grid container>
      <Grid item xs={12} sm={12} md={12}>
        <Typography variant="h6">{t("Session.Forwards.Title")}</Typography>
      </Grid>
      <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>
                        {handleForwardClick ? (
                          <Link href="#" onClick={handleForwardClick(row.from)}>
                            {row.from}
                          </Link>
                        ) : (
                          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>
      {showSessionInfo && (
        <>
          <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,
  showSessionInfo: PropTypes.bool.isRequired,
  handleForwardClick: PropTypes.func
};

export default SessionForwardsComponent;