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

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

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

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

  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={() => 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={updatePolochon}
        id={id}
        initialName={name}
        initialUrl={url}
        initialToken={token}
      />
    </React.Fragment>
  );
};
PolochonConnected.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  token: PropTypes.string,
  url: PropTypes.string,
  authToken: PropTypes.string,
  users: PropTypes.instanceOf(List),
  updatePolochon: PropTypes.func,
  deletePolochon: PropTypes.func,
};

export const Polochon = connect(null, { updatePolochon, deletePolochon })(
  PolochonConnected
);