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

import {
  updateUser, getUserInfos,
  getUserTokens, getUserModules
} from "../../actions/users"
import Modules from "../modules/modules"

const mapStateToProps = (state) => ({
  isLoading: state.userStore.get("loading"),
  token: state.userStore.get("polochonToken"),
  url: state.userStore.get("polochonUrl"),
  modules : state.userStore.get("modules"),
  modulesLoading : state.userStore.get("modulesLoading"),
});

const mapDispatchToProps = {
    updateUser, getUserInfos,
    getUserTokens, getUserModules
}

const UserProfile = (props) => {
  useEffect(() => {
    props.getUserInfos();
    props.getUserModules();
  }, [])

  return (
    <div>
      <UserEdit
        isLoading={props.isLoading}
        token={props.token}
        url={props.url}
        updateUser={props.updateUser}
      />
      <Modules
        modules={props.modules}
        isLoading={props.modulesLoading}
      />
    </div>
  )
}
UserProfile.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  token: PropTypes.string,
  url: PropTypes.string,
  updateUser: PropTypes.func.isRequired,
  getUserInfos: PropTypes.func.isRequired,
  getUserModules: PropTypes.func.isRequired,
  modules: PropTypes.instanceOf(Map),
  modulesLoading: PropTypes.bool.isRequired,
};

const UserEdit = (props) => {
  if (props.isLoading) {
    return <Loader />
  }

  const [url, setUrl] = useState(props.url);
  const [token, setToken] = useState(props.token);
  const [password, setPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");

  const handleSubmit = (ev) => {
    ev.preventDefault();
    props.updateUser({
      "polochon_url": url,
      "polochon_token": token,
      "password": password,
      "password_confirm": passwordConfirm,
    });
  }

  return (
    <div className="row mb-3">
      <div className="col-12 col-md-6 offset-md-3">
        <h2>Edit user</h2>
        <hr />
        <form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
          <div className="form-group">
            <label className="control-label">Polochon URL</label>
            <input
              className="form-control"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
            />
          </div>

          <div className="form-group">
            <label className="control-label">Polochon token</label>
            <input
              className="form-control"
              value={token}
              onChange={(e) => setToken(e.target.value)}
            />
          </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>
  );
}
UserEdit.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  token: PropTypes.string,
  url: PropTypes.string,
  updateUser: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);