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