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