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

import { updateUser } from "../../actions/admins"

import Toggle from "react-bootstrap-toggle";

import { PolochonSelect } from "../polochons/select"
import { FormModal } from "../forms/modal"
import { FormInput } from "../forms/input"

const UserEditConnect = ({
  id,
  admin: initAdmin,
  activated: initActivated,
  polochonToken,
  polochonId: initPolochonId,
  polochonActivated: initPolochonActivated,
  updateUser,
  publicPolochons,
}) => {
  const [modal, setModal] = useState(false);
  const [admin, setAdmin] = useState(initAdmin);
  const [activated, setActivated] = useState(initActivated);
  const [token, setToken] = useState(polochonToken);
  const [polochonId, setPolochonId] = useState(initPolochonId);
  const [polochonActivated, setPolochonActivated] = useState(initPolochonActivated);
  const [password, setPassword] = useState("");

  const handleSubmit = function(e) {
    if (e) { e.preventDefault(); }
    updateUser({
      userId: id,
      polochonToken: token,
      admin,
      activated,
      polochonId,
      polochonActivated,
      password,
    });
    setModal(false);
  };

  return (
    <span>
      <i
        className="fa fa-pencil clickable"
        onClick={() => setModal(true)} />

      <FormModal
        show={modal}
        setShow={setModal}
        title="Edit user"
        icon="edit"
        handleSubmit={handleSubmit}
      >

      <div className="form-group">
        <label>Account status</label>
        <Toggle className="pull-right" on="Activated" off="Deactivated" active={activated}
          offstyle="danger" handlestyle="secondary" onClick={() => setActivated(!activated)}
        />
      </div>

      <div className="form-group">
        <label>Admin status</label>
        <Toggle className="pull-right" on="Admin" off="User" active={admin}
          offstyle="info" handlestyle="secondary" onClick={() => setAdmin(!admin)} />
      </div>

      <FormInput label="Password" value={password} updateValue={setPassword} />

      <PolochonSelect value={polochonId} changeValue={setPolochonId} polochonList={publicPolochons} />
      <FormInput label="Polochon Token" value={token} updateValue={setToken} />
      <div className="form-group">
        <label>Polochon activated</label>
        <Toggle className="pull-right" on="Activated" off="Deactivated" active={polochonActivated}
          offstyle="danger" handlestyle="secondary" onClick={() => setPolochonActivated(!polochonActivated)}
        />
      </div>

    </FormModal>
  </span>
  );
}
UserEditConnect.propTypes = {
  id: PropTypes.string,
  activated: PropTypes.bool,
  admin: PropTypes.bool,
  data: PropTypes.object,
  updateUser: PropTypes.func,
  polochonToken: PropTypes.string,
  polochonId: PropTypes.string,
  polochonActivated: PropTypes.bool,
  publicPolochons: PropTypes.instanceOf(List),
};

const mapStateToProps = (state) => ({
  publicPolochons: state.polochon.get("public"),
});

export const UserEdit = connect(mapStateToProps, {updateUser})(UserEditConnect);