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

import { editPolochonUser } from "../../actions/polochon";

import Toggle from "react-bootstrap-toggle";

import { FormModal } from "../forms/modal";
import { FormInput } from "../forms/input";

export const PolochonUserConnected = ({
  polochonId,
  id,
  name,
  initialToken,
  initialActivated,
  editPolochonUser
}) => {
  const [edit, setEdit] = useState(false);
  const [token, setToken] = useState(initialToken);
  const [activated, setActivated] = useState(initialActivated);

  useEffect(() => {
    setActivated(initialActivated);
    setToken(initialToken);
  }, [initialActivated, initialToken]);

  const handleSubmit = () => {
    editPolochonUser({
      polochonId,
      id,
      token,
      activated
    });
    setEdit(false);
  };

  return (
    <tr>
      <td>{name}</td>
      <td>{activated ? "Activated" : "Not activated"}</td>
      <td>
        <i className="fa fa-edit ml-2" onClick={() => setEdit(true)} />
        <FormModal
          show={edit}
          setShow={setEdit}
          title="Edit polochon's user"
          icon="edit"
          handleSubmit={handleSubmit}
        >
          <FormInput label="Token" value={token} updateValue={setToken} />
          <div className="form-group">
            <label>Activated</label>
            <Toggle
              className="pull-right"
              on="yes"
              off="no"
              active={activated}
              offstyle="info"
              handlestyle="secondary"
              onClick={() => setActivated(!activated)}
            />
          </div>
        </FormModal>
      </td>
    </tr>
  );
};
PolochonUserConnected.propTypes = {
  polochonId: PropTypes.string,
  id: PropTypes.string,
  name: PropTypes.string,
  initialToken: PropTypes.string,
  initialActivated: PropTypes.bool,
  editPolochonUser: PropTypes.func
};

export const PolochonUser = connect(null, { editPolochonUser })(
  PolochonUserConnected
);