import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadReleaseNotes } from "../actionCreators";
import ReleaseNotesListComponent from "./ReleaseNotesListComponent";

const ReleaseNotesContainer = ({ actions, releaseNotes }) => {
  const [notesFlags, setNotesFlags] = useState({});

  useEffect(() => {
    actions.loadReleaseNotes();
  }, []);

  const handleToggle = (version) => (_, expanded) => {
    setNotesFlags({
      ...notesFlags,
      [version]: expanded
    });
  };

  return (
    <ReleaseNotesListComponent
      releaseNotes={releaseNotes}
      handleToggle={handleToggle}
      notesFlags={notesFlags}
    />
  );
};

ReleaseNotesContainer.propTypes = {
  actions: PropTypes.object.isRequired,
  releaseNotes: PropTypes.array.isRequired
};

function mapStateToProps(state) {
  return {
    releaseNotes: state.releaseNotes
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ loadReleaseNotes }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ReleaseNotesContainer);