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

import { User } from "./user";

import { getUsers } from "../../actions/admins";
import { getPolochons } from "../../actions/polochon";

const mapStateToProps = state => ({
  users: state.adminStore.get("users")
});
const mapDispatchToProps = { getUsers, getPolochons };

const UserListConnect = ({ users, getUsers, getPolochons }) => {
  useEffect(() => {
    getUsers();
    getPolochons();
  }, [getUsers, getPolochons]);

  return (
    <div className="table-responsive my-2">
      <table className="table table-striped">
        <thead className="table-secondary">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Activated</th>
            <th>Admin</th>
            <th>Polochon URL</th>
            <th>Polochon token</th>
            <th>Polochon activated</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {users.map((el, index) => (
            <User
              key={index}
              id={el.get("id")}
              name={el.get("name")}
              admin={el.get("admin")}
              activated={el.get("activated")}
              polochonActivated={el.get("polochon_activated")}
              token={el.get("token", "")}
              polochonId={el.getIn(["polochon", "id"], "")}
              polochonUrl={el.getIn(["polochon", "url"], "")}
              polochonName={el.getIn(["polochon", "name"], "")}
            />
          ))}
        </tbody>
      </table>
    </div>
  );
};
UserListConnect.propTypes = {
  getUsers: PropTypes.func,
  getPolochons: PropTypes.func,
  users: PropTypes.PropTypes.instanceOf(List)
};

export const UserList = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserListConnect);