import React 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";

const UserDetails = ({ history }) => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("sm"));
  const { id } = useParams();
  const dispatch = useDispatch();

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

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

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

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

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

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

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

  return (
    <div>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      <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={() => handleReset(user.email)}
            >
              {!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={enableHandler}
            >
              {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={deleteHandler}
            >
              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?.socialMedias ? user.socialMedias : "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,
    }),
  }),
};