import React from "react";
import PropTypes from "prop-types";
import {
  EditButton,
  ProfileCardWrapper,
  ProfileCardContainer,
  ProfileCardHeader,
  HeaderTitle,
  EditIcon,
  MessageIcon,
  MessageButton,
  ProfileInfoContainer,
} from "./ProfileCard.styled";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import { useRouteMatch } from "react-router-dom";
import { fetchProfile } from "../../store/actions/profile/profileActions";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { selectProfile } from "../../store/selectors/profileSelectors";
import { selectUserId } from "../../store/selectors/loginSelectors";
import { useState } from "react";
import { fetchProfileOffers } from "../../store/actions/offers/offersActions";
import EditProfile from "./EditProfile/EditProfile";
import ProfileMainInfo from "./ProfileMainInfo/ProfileMainInfo";
import ProfileContact from "./ProfileContact/ProfileContact";
import ProfileStats from "./ProfileStats/ProfileStats";
import { useTranslation } from "react-i18next";

const ProfileCard = () => {
  const [isMyProfile, setIsMyProfile] = useState(false);
  const [editProfileModal, setEditProfileModal] = useState(false);
  const routeMatch = useRouteMatch();
  const dispatch = useDispatch();
  const profile = useSelector(selectProfile);
  const userId = useSelector(selectUserId);
  const idProfile = routeMatch.params.idProfile;
  const { t } = useTranslation();

  useEffect(() => {
    if (idProfile?.length > 0) {
      reFetchProfile();
    }
  }, [idProfile]);

  const reFetchProfile = () => {
    dispatch(fetchProfile(idProfile));
    dispatch(fetchProfileOffers(idProfile));
    if (userId === idProfile) setIsMyProfile(true);
  };

  let percentOfSucceededExchanges;
  if (profile?.statistics?.exchanges?.succeeded === 0) {
    percentOfSucceededExchanges = 0;
  } else {
    percentOfSucceededExchanges = Math.ceil(
      (profile?.statistics?.exchanges?.total /
        profile?.statistics?.exchanges?.succeeded) *
        100
    );
  }

  const closeModalHandler = () => {
    setEditProfileModal(false);
  };

  if (editProfileModal) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "auto";
  }

  return (
    <>
      <ProfileCardContainer>
        <ProfileCardHeader>
          <PersonOutlineIcon color="action" sx={{ mr: 0.9 }} />
          <HeaderTitle>{t("profile.myProfile")}</HeaderTitle>
        </ProfileCardHeader>
        <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}>
          {isMyProfile ? (
            <EditButton onClick={() => setEditProfileModal(true)}>
              <EditIcon />
            </EditButton>
          ) : (
            <MessageButton>
              <MessageIcon />
            </MessageButton>
          )}
          <ProfileInfoContainer>
            {/* Profile Main Info  */}
            <ProfileMainInfo profile={profile} isMyProfile={isMyProfile} />
            {/* Profile Contact */}
            <ProfileContact profile={profile} isMyProfile={isMyProfile} />
            {/* Profile Stats */}
            <ProfileStats
              profile={profile}
              percentOfSucceededExchanges={percentOfSucceededExchanges}
            />
          </ProfileInfoContainer>
        </ProfileCardWrapper>
      </ProfileCardContainer>
      {editProfileModal && (
        <EditProfile
          profile={profile}
          closeModalHandler={closeModalHandler}
          reFetchProfile={reFetchProfile}
        />
      )}
    </>
  );
};

ProfileCard.propTypes = {
  children: PropTypes.node,
};

export default ProfileCard;
