import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
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";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));

const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
  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]}
                />
              </ExpansionPanelDetails>
            </ExpansionPanel>
          );
        })
      )}
    </div>
  );
};

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

export default SessionListComponent;