import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import {
  ExpansionPanel,
  ExpansionPanelSummary,
  ExpansionPanelDetails
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import PropTypes from "prop-types";
import SessionSummary from "./SessionSummary";
import SessionForwardsComponent from "./SessionForwardsComponent";
import Spinner from "../../../components/common/Spinner";
import { useTranslation } from "react-i18next";
import styles from "../../../components/common/styles/divStyles";

const useStyles = makeStyles(styles);

const SessionListComponent = ({
  sessions,
  handleToggle,
  forwards,
  openOptionsDialog
}) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <div className={classes.root}>
      <h2>{t("Session.Title")}</h2>
      {sessions.loading ? (
        <Spinner />
      ) : (
        sessions.loaded &&
        sessions.map((session) => {
          return (
            <ExpansionPanel
              key={session.sessionId}
              onChange={handleToggle(session.sessionId)}
            >
              <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls={`panel-${session.sessionId}-content`}
                id={`panel-${session.sessionId}-header`}
              >
                <SessionSummary session={session} />
              </ExpansionPanelSummary>
              <ExpansionPanelDetails>
                <SessionForwardsComponent
                  session={session}
                  forwards={forwards[session.sessionId]}
                  openOptionsDialog={openOptionsDialog}
                  showSessionInfo={true}
                />
              </ExpansionPanelDetails>
            </ExpansionPanel>
          );
        })
      )}
    </div>
  );
};

SessionListComponent.propTypes = {
  sessions: PropTypes.array.isRequired,
  handleToggle: PropTypes.func.isRequired,
  forwards: PropTypes.object.isRequired,
  openOptionsDialog: PropTypes.func.isRequired
};

export default SessionListComponent;