import React, { useState } from "react";
import IconButton from "../../components/IconButton/IconButton";
import userPageBtnIcon from "../../assets/images/userPageBtnIcon.png";
import planeVector from "../../assets/images/planeVector.png";
import lock from "../../assets/images/lock.png";
import filters from "../../assets/images/filters.png";
import forbiden from "../../assets/images/forbiden.png";
import x from "../../assets/images/x.png";
import edit from "../../assets/images/edit.png";
import { useEffect } from "react";
import addUser from "../../assets/images/addUser.png";
// import { getAllUsers } from "../../request/usersRequest";
// import { getUsers } from "../../store/saga/usersSaga";
import { useDispatch, useSelector } from "react-redux";
import {
  // deleteUserReq,
  setEnableUsersReq,
  setUsersReq,
} from "../../store/actions/users/usersActions";
import { useTheme } from "@mui/system";
import { useMediaQuery } from "@mui/material";
// import DialogComponent from "../../components/MUI/DialogComponent";
import InviteDialog from "../../components/MUI/InviteDialog";
import { Link } from "react-router-dom";
import { forgetPassword } from "../../store/actions/login/loginActions";
import { useTranslation } from "react-i18next";

const UsersPage = () => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("sm"));
  const dispatch = useDispatch();
  const { users } = useSelector((s) => s.users);

  const [showInvite, setShowInvite] = useState(false);
  const [editEnable, setEdit] = useState(false);

  const { t } = useTranslation();

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

  const disableHandler = (id) => {
    dispatch(setEnableUsersReq({ id }));
  };

  const handleReset = (email) => {
    dispatch(
      forgetPassword({
        email,
        handleApiResponseSuccessReset,
      })
    );
  };

  const handleApiResponseSuccessReset = () => {
    console.log("DONE!");
  };

  return (
    <div data-testid="users-page">
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      {/* {showInvite && <DialogComponent/>} */}
      <InviteDialog
        open={showInvite}
        onClose={() => {
          setShowInvite(false);
        }}
        title={
          <div
            className="flex-center"
            style={{ justifyContent: "space-between" }}
          >
            <div className="flex-center" style={{ justifyContent: "start" }}>
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingRight: "10px",
                }}
                src={addUser}
              />
              <h5>{t("users.inviteUser")}</h5>
              <div className="vr"></div>
              <p className="dialog-subtitle">{t("users.regLink")}</p>
            </div>
            <IconButton onClick={() => setShowInvite(false)}>
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                }}
                src={x}
              />
            </IconButton>
          </div>
        }
      />
      <div>
        <div
          className="pl-144 flex-center"
          style={{ paddingTop: "36px", justifyContent: "space-between" }}
        >
          <h1 className="page-heading">{t("users.management")}</h1>
          <div className="flex-center">
            {/* <button></button> */}
            <IconButton
              data-testid="editbtn"
              className={`${
                editEnable && "enabledEdit"
              } c-btn--primary-outlined editEnableBtn c-btn userPageBtn`}
              onClick={() => {
                setEdit((s) => !s);
              }}
            >
              {!matches && "Režim uređivanja"}
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: matches ? "0px" : "10px",
                }}
                src={userPageBtnIcon}
              />
            </IconButton>
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
            >
              {!matches && "Filteri"}
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: matches ? "0px" : "10px",
                }}
                src={filters}
              />
            </IconButton>
          </div>
        </div>
        <div
          className="pl-144"
          style={{
            display: "flex",
            marginTop: "39px",
            flexDirection: "column",
            justifyContent: "space-between",
            minHeight: "500px",
          }}
        >
          <div className=" table-cont">
            <table className="usersTable" style={{ width: "893.56px" }}>
              <thead>
                <tr className="headingRow">
                  <th>{t("users.fullName")}</th>
                  <th>E-mail</th>
                  <th>{t("users.position")}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {users.map((n) => (
                  <tr
                  data-testid="user-row"
                   key={n.id} className="secondaryRow">
                    <td>
                      {n.firstName} {n.lastName}
                    </td>
                    <td>{n.email}</td>
                    <td>HR Specialist</td>
                    {/* <td className="cvLink">CV_Ermin.pdf</td> */}
                    <td>
                      {editEnable && (
                        <>
                          <IconButton
                            className={`c-btn--primary-outlined c-btn td-btn`}
                            onClick={() => handleReset(n.email)}
                          >
                            <img
                              style={{
                                position: "relative",
                              }}
                              src={lock}
                            />
                          </IconButton>
                          <IconButton
                            className={`c-btn--primary-outlined c-btn td-btn ${
                              n.isEnabled ? "active" : "inactive"
                            }`}
                            onClick={() => disableHandler(n.id)}
                          >
                            <img
                              style={{
                                position: "relative",
                              }}
                              src={forbiden}
                            />
                          </IconButton>
                          <Link to={`/users/${n.id}`}>
                            <IconButton
                              className={"c-btn--primary-outlined c-btn td-btn"}
                            >
                              <img
                                style={{
                                  position: "relative",
                                }}
                                src={edit}
                              />
                            </IconButton>
                          </Link>
                        </>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom:'35px' }}>
            <IconButton
              className={"c-btn--primary c-btn inviteBtn"}
              onClick={() => {
                setShowInvite(true);
              }}
              // style={{
              //   // marginBottom:'20px !important'
              // }}
            >
              <img
                style={{
                  position: "relative",
                  top: 1.25,
                  paddingRight: "15px",
                }}
                src={planeVector}
              />{" "}
              {t("users.invite")}
            </IconButton>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UsersPage;
