import React, { useState } from "react";
import PropTypes from "prop-types";
import { useDispatch } from "react-redux";

import { PolochonUsers } from "./users";
import { PolochonEdit } from "./edit";

import { updatePolochon, deletePolochon } from "../../actions/polochon";

export const Polochon = ({ id, name, token, url, authToken, users }) => {
  const [edit, setEdit] = useState(false);

  const dispatch = useDispatch();

  return (
    <React.Fragment>
      <div className="card mb-2">
        <div className="card-header">
          {name !== "" ? name : "-"}
          <small className="ml-1">({url !== "" ? url : "-"})</small>
          <span className="pull-right">
            <i
              className="fa fa-edit mr-3 clickable"
              onClick={() => setEdit(true)}
            />
            <i
              className="fa fa-trash clickable"
              onClick={() => dispatch(deletePolochon(id))}
            />
          </span>
        </div>
        <div className="card-body">
          <p className="card-text">ID: {id}</p>
          <p className="card-text">Egress token: {token}</p>
          <p className="card-text">Ingress token: {authToken}</p>
          <PolochonUsers id={id} users={users} />
        </div>
      </div>

      <PolochonEdit
        title="Polochon config"
        show={edit}
        setShow={setEdit}
        update={(params) => dispatch(updatePolochon(params))}
        id={id}
        initialName={name}
        initialUrl={url}
        initialToken={token}
      />
    </React.Fragment>
  );
};
Polochon.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  token: PropTypes.string,
  url: PropTypes.string,
  authToken: PropTypes.string,
  users: PropTypes.array.isRequired,
};