import React, { useEffect, useState } from "react";
import {
  DollarIcon,
  GrayButtonsContainer,
  ProfileImgPIB,
} from "./MyProfile.styled";
import HeaderPopover from "../HeaderPopover/HeaderPopover";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { selectMineProfile } from "../../../store/selectors/profileSelectors";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import { fetchMineProfile } from "../../../store/actions/profile/profileActions";
import selectedTheme from "../../../themes";
import { EyeIcon } from "../HeaderPopover/HeaderPopover.styled";
import { useHistory } from "react-router-dom";
import PropTypes from "prop-types";
import { ABOUT_PAGE } from "../../../constants/pages";
import LogoutButton from "./LogoutButton/LogoutButton";
import AboutButton from "./AboutButton/AboutButton";
import PrivacyPolicyButton from "./PrivacyPolicyButton/PrivacyPolicyButton";
import scrollConstants from "../../../constants/scrollConstants";

export const MyProfile = (props) => {
  const { t } = useTranslation();
  const profile = useSelector(selectMineProfile);
  const userId = useSelector(selectUserId);
  const dispatch = useDispatch();
  const history = useHistory();
  const [profileAsArray, setProfileAsArray] = useState([]);
  useEffect(() => {
    if (userId?.length > 1) {
      dispatch(fetchMineProfile());
    }
  }, [userId]);
  useEffect(() => {
    if (profile?.statistics) {
      setProfileAsArray([
        {
          src: profile.image,
          title: profile.company.name,
          onClick: () => seeMyProfile(),
          text: (
            <React.Fragment>
              <ProfileImgPIB />
              {`${t("itemDetailsCard.PIB")}${profile.company.PIB}`}
            </React.Fragment>
          ),
        },
      ]);
    }
  }, [profile]);
  const seeMyProfile = () => {
    history.push(`/profile/${userId}`);
    props.closePopover();
  };
  const seePrices = () => {
    history.push({
      pathname: ABOUT_PAGE,
      state: {
        clicked: true,
        navigation: scrollConstants.about.pricesPage,
      },
    });
    props.closePopover();
  };

  return (
    <HeaderPopover
      title={t("header.myProfile")}
      items={profileAsArray}
      buttonText={t("header.checkProfile")}
      buttonIcon={<EyeIcon color={selectedTheme.colors.iconYellowColor} />}
      isProfile
      buttonOnClick={() => seeMyProfile()}
      secondButtonIcon={<DollarIcon />}
      secondButtonText={t("header.prices")}
      secondButtonOnClick={seePrices}
    >
      <GrayButtonsContainer>
        <AboutButton closePopover={props.closePopover} />
        <PrivacyPolicyButton closePopover={props.closePopover} />
      </GrayButtonsContainer>
      <LogoutButton />
    </HeaderPopover>
  );
};

MyProfile.propTypes = {
  closePopover: PropTypes.func,
};