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);