import React, { useState } from "react";
import PropTypes from "prop-types";
import avatar from "../../assets/images/Avatar.png";
import filters from "../../assets/images/filters.png";
import lock from "../../assets/images/lock.png";
import forbiden from "../../assets/images/forbiden.png";
import IconButton from "../../components/IconButton/IconButton";
import { Link, useParams } from "react-router-dom";
import {
  deleteUserReq,
  setEnableUsersReq,
  userDetailsReq,
} from "../../store/actions/users/usersActions";
import { useDispatch, useSelector } from "react-redux";
import { USERS_PAGE } from "../../constants/pages";
import { forgetPassword } from "../../store/actions/login/loginActions";
import { useEffect } from "react";
import { useTheme } from "@emotion/react";
import { useMediaQuery } from "@mui/material";
import ConfirmDialog from "../../components/MUI/ConfirmDialog";

const UserDetails = ({ history }) => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("sm"));
  const { id } = useParams();
  const dispatch = useDispatch();
  const [showConfirm, setConfirm] = useState(false);
  const [showReset, setReset] = useState(false);
  const [showDelete, setDelete] = useState(false);

  const { user } = useSelector((s) => s.userDetails);

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

  const handleApiResponseSuccessReset = () => {
    setReset(false);
  };

  const enableHandler = () => {
    dispatch(
      setEnableUsersReq({
        id: user.id,
        handleApiResponseSuccess: handleApiResponseSuccessEnable,
      })
    );
  };

  const handleApiResponseSuccessEnable = () => {
    setConfirm(false);
  };

  const deleteHandler = () => {
    dispatch(
      deleteUserReq({
        id,
        handleApiResponseSuccess: handleApiResponseSuccessDelete,
      })
    );
  };

  const handleApiResponseSuccessDelete = () => {
    history.push({
      pathname: USERS_PAGE,
      state: {
        from: history.location.pathname,
      },
    });
  };

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

  return (
    <div>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      <ConfirmDialog
        open={showReset}
        title={"Reset password"}
        subtitle={user?.firstName + " " + user?.lastName}
        imgSrc={lock}
        content="Are you sure you want to send password reset link?"
        onClose={() => {
          setReset(false);
        }}
        onConfirm={() => {
          handleReset(user.email);
          // setConfirm(false)
        }}
      />
      <ConfirmDialog
        open={showConfirm}
        title={"Disable user"}
        subtitle={user?.firstName + " " + user?.lastName}
        imgSrc={forbiden}
        content="Are you sure you want to disable user?"
        onClose={() => {
          setConfirm(false);
        }}
        onConfirm={() => {
          enableHandler(user.id);
          // setConfirm(false)
        }}
      />
      <ConfirmDialog
        open={showDelete}
        title={"Delete user"}
        subtitle={user?.firstName + " " + user?.lastName}
        imgSrc={filters}
        content="Are you sure you want to delete user?"
        onClose={() => {
          setDelete(false);
        }}
        onConfirm={() => {
          deleteHandler(user.id);
          // setConfirm(false)
        }}
      />
      <div className="pl-144 pt-36px">
        <div className="divider">
          <div className="flex-center">
            <h1 style={{ letterSpacing: "1px" }}>Korisnik</h1>
            <div
              className="vr"
              style={{
                margin: "0px 10px 0px 15px",
                top: "6px",
                backgroundColor: "#252525",
              }}
            ></div>
            <h3
              style={{
                letterSpacing: "0.75px",
                position: "relative",
                top: "4px",
              }}
              className="text-blue"
            >
              {user && user.firstName} {user && user.lastName}
            </h3>
          </div>
          <div className="flex-center">
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
              onClick={() => setReset(true)}
            >
              {!matches && "Resetuj password"}
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: !matches && "10px",
                }}
                src={lock}
              />
            </IconButton>
            {!matches && (
              <IconButton
                className={`c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding ${
                  user?.isEnabled ? "activeEnable" : "deactiveEnable"
                }`}
                onClick={() => setConfirm(true)}
              >
                {user?.isEnabled ? "Blokiraj" : "Odblokiraj"}
                <img
                  style={{
                    position: "relative",
                    top: -0.25,
                    paddingLeft: "10px",
                  }}
                  src={forbiden}
                />
              </IconButton>
            )}
            {!matches && (
              <IconButton
                className={
                  "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
                }
                onClick={() => setDelete(true)}
              >
                Obrisi
                <img
                  style={{
                    position: "relative",
                    top: -0.25,
                    paddingLeft: "10px",
                  }}
                  src={filters}
                />
              </IconButton>
            )}
            <IconButton
              className={
                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
              }
            >
              {!matches && "Uredi profil"}
              <img
                style={{
                  position: "relative",
                  top: -0.25,
                  paddingLeft: !matches && "10px",
                }}
                src={filters}
              />
            </IconButton>
          </div>
        </div>
        <div className="flex-center" style={{ justifyContent: "flex-start" }}>
          <img
            src={avatar}
            height="108px"
            width="108px"
            style={{ margin: "18px 15px 36px 0px" }}
          />
          <p>
            {user?.position
              ? user.position
              : "Position has not been declared yet."}
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
          <p style={{ fontWeight: "600" }}>Kontakt</p>
          <div className="flex-center" style={{ justifyContent: "flex-start" }}>
            <p style={{ width: "85px" }}>Email:</p>
            <p className="text-blue">{user && user.email}</p>
          </div>
          <div className="flex-center" style={{ justifyContent: "flex-start" }}>
            <p style={{ width: "85px" }}>Telefon:</p>
            <p className="text-blue">
              {user?.phoneNumber
                ? user.phoneNumber
                : "User has no phone number saved."}
            </p>
          </div>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "18px",
            paddingTop: "36px",
          }}
        >
          <p style={{ fontWeight: "600" }}>Drustvene mreze</p>
          <div className="flex-center" style={{ justifyContent: "flex-start" }}>
            <p style={{ width: "85px" }}>LinkedIn:</p>
            <p className="text-blue">
              {user?.linkedIn
                ? user.linkedIn
                : "User takes not part in any social media."}
            </p>
          </div>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginTop: "150px",
          }}
        >
          <Link to={"/users"} className="text-blue">
            Nazad na listu korisnika
          </Link>
        </div>
      </div>
    </div>
  );
};

export default UserDetails;

UserDetails.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
};
