import React from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import { format } from "timeago.js";

import { UserEdit } from "./userEdit";

export const User = ({ id }) => {
  const user = useSelector((state) => state.admin.users.get(id));
  const polochon = user.polochon;
  const lastSeen = new Date(user.last_seen);

  return (
    <tr>
      <td>{user.name}</td>
      <td>
        <span
          className={user.activated ? "fa fa-check" : "fa fa-times text-danger"}
        ></span>
      </td>
      <td>
        <span className={user.admin ? "fa fa-check" : "fa fa-times"}></span>
      </td>
      <td>
        {polochon ? polochon.name : "-"}
        {polochon && <small className="ml-1">({polochon.url})</small>}
      </td>
      <td>{user.token}</td>
      <td>
        <span
          className={
            user.polochon_activated ? "fa fa-check" : "fa fa-times text-danger"
          }
        ></span>
      </td>
      <td>{isNaN(lastSeen) ? "-" : format(lastSeen)}</td>
      <td>
        <UserEdit id={id} />
      </td>
    </tr>
  );
};
User.propTypes = {
  id: PropTypes.string.isRequired,
};