import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import { User } from "./user";

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

export const UserList = () => {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.adminStore.get("users"));

  useEffect(() => {
    dispatch(getUsers());
    dispatch(getPolochons());
  }, [dispatch]);

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