import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { List } from "immutable";

import { getManagedPolochons } from "../../actions/polochon";

import { Polochon } from "./polochon";
import { PolochonAdd } from "./add";

const mapStateToProps = state => ({
  managedList: state.polochon.get("managed")
});

const mapDispatchToProps = {
  getManagedPolochons
};

const PolochonListConnected = ({ getManagedPolochons, managedList }) => {
  useEffect(() => {
    getManagedPolochons();
  }, [getManagedPolochons]);

  return (
    <div className="row mb-3">
      <div className="col-12 col-md-8 offset-md-2">
        <h2>My polochons</h2>
        <hr />
        <span>
          {managedList.map((el, index) => (
            <Polochon
              key={index}
              id={el.get("id")}
              name={el.get("name")}
              token={el.get("token")}
              url={el.get("url")}
              authToken={el.get("auth_token")}
              users={el.get("users")}
            />
          ))}
        </span>
        <PolochonAdd />
      </div>
    </div>
  );
};
PolochonListConnected.propTypes = {
  getManagedPolochons: PropTypes.func,
  managedList: PropTypes.instanceOf(List)
};

export const PolochonList = connect(
  mapStateToProps,
  mapDispatchToProps
)(PolochonListConnected);