import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Loader from "../loader/loader";

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

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

export const UserEdit = () => {
  const dispatch = useDispatch();

  const [id, setId] = useState(polochonId);
  const [password, setPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");

  const loading = useSelector((state) => state.userStore.get("loading"));
  const publicPolochons = useSelector((state) => state.polochon.get("public"));
  const polochonId = useSelector((state) => state.userStore.get("polochonId"));
  const polochonActivated = useSelector((state) =>
    state.userStore.get("polochonActivated")
  );

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

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

  const handleSubmit = (ev) => {
    ev.preventDefault();
    dispatch(
      updateUser({
        password: password,
        password_confirm: passwordConfirm, // eslint-disable-line camelcase
        polochon_id: id, // eslint-disable-line camelcase
      })
    );
  };

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