import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Loader from "../loader/loader";
import { List } from "immutable";

import { getUserInfos, updateUser } from "../../actions/users";
import { getPolochons } from "../../actions/polochon";

import { PolochonSelect } from "../polochons/select";

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

const mapDispatchToProps = {
  updateUser,
  getPolochons,
  getUserInfos
};

const UserEditConnect = ({
  loading,
  polochonId,
  polochonActivated,
  updateUser,
  getPolochons,
  getUserInfos,
  publicPolochons
}) => {
  const [id, setId] = useState(polochonId);
  const [password, setPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");

  useEffect(() => {
    getPolochons();
    getUserInfos();
  }, [getPolochons, getUserInfos]);

  useEffect(() => {
    setId(polochonId);
  }, [polochonId]);

  const handleSubmit = ev => {
    ev.preventDefault();
    updateUser({
      password: password,
      password_confirm: passwordConfirm,
      polochon_id: id
    });
  };

  if (loading) {
    return <Loader />;
  }

  return (
    <div className="row mb-3">
      <div className="col-12 col-md-8 offset-md-2">
        <h2>Edit user</h2>
        <hr />
        <form className="form-horizontal" onSubmit={ev => handleSubmit(ev)}>
          <div className="form-group">
            <label className="control-label">
              Polochon
              {polochonActivated || (
                <span className="ml-1 text text-primary">
                  (Needs activation from admin)
                </span>
              )}
            </label>
            <PolochonSelect
              value={id}
              changeValue={setId}
              polochonList={publicPolochons}
            />
          </div>

          <hr />

          <div className="form-group">
            <label className="control-label">Password</label>
            <input
              className="form-control"
              type="password"
              autoComplete="off"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
          </div>

          <div className="form-group">
            <label className="control-label">Confirm Password</label>
            <input
              className="form-control"
              type="password"
              autoComplete="off"
              value={passwordConfirm}
              onChange={e => setPasswordConfirm(e.target.value)}
            />
          </div>

          <div>
            <input
              type="submit"
              className="btn btn-primary pull-right"
              value="Update"
            />
          </div>
        </form>
      </div>
    </div>
  );
};
UserEditConnect.propTypes = {
  loading: PropTypes.bool.isRequired,
  polochonId: PropTypes.string,
  polochonActivated: PropTypes.bool,
  updateUser: PropTypes.func,
  getPolochons: PropTypes.func,
  getUserInfos: PropTypes.func,
  publicPolochons: PropTypes.instanceOf(List)
};

export const UserEdit = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserEditConnect);