import React, { useState } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";

import { updateUser, deleteUser } from "../../actions/admins";

import Toggle from "react-bootstrap-toggle";

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

export const UserEdit = ({
  id,
  name,
  admin: initAdmin,
  activated: initActivated,
  polochonToken,
  polochonId: initPolochonId,
  polochonActivated: initPolochonActivated,
}) => {
  const dispatch = useDispatch();
  const publicPolochons = useSelector((state) => state.polochon.get("public"));

  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 [confirmDelete, setConfirmDelete] = useState(false);

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

  const handleDeleteUser = (e) => {
    if (e) {
      e.preventDefault();
    }
    if (confirmDelete) {
      dispatch(deleteUser(name));
      setModal(false);
    } else {
      setConfirmDelete(true);
    }
  };

  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>

        <div className="form-group">
          <button className="btn btn-danger w-100" onClick={handleDeleteUser}>
            {!confirmDelete ? "Delete user forever" : "Are you sure ?"}
          </button>
        </div>
      </FormModal>
    </span>
  );
};
UserEdit.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  activated: PropTypes.bool,
  admin: PropTypes.bool,
  polochonToken: PropTypes.string,
  polochonId: PropTypes.string,
  polochonActivated: PropTypes.bool,
};