import React, { useState } from "react";
import PropTypes from "prop-types";
import {
  DirectChatContentHeaderContainer,
  DirectChatContentHeaderFlexContainer,
  DirectChatHeaderStatusContainer,
  DirectChatHeaderStatusText,
  PhoneIcon,
  PhoneIconContainer,
  ProfileDetails,
  ProfileImage,
  ProfileLocation,
  ProfileLocationIcon,
  ProfileLocationText,
  ProfileName,
} from "./DirectChatContentHeader.styled";
import PopoverComponent from "../../../Popovers/PopoverComponent";
import PhonePopover from "../../../Popovers/PhonePopover/PhonePopover";
import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
import useIsMobile from "../../../../hooks/useIsMobile";
import history from "../../../../store/utils/history";
import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
import { PROFILE_PAGE } from "../../../../constants/pages";
import { selectAmIBlocked } from "../../../../store/selectors/profileSelectors";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import exchangeStatus from "../../../../constants/exchangeStatus";

const DirectChatContentHeader = (props) => {
  const { t } = useTranslation();
  const [showPhonePopover, setShowPhonePopover] = useState(false);
  const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null);
  const { isMobile } = useIsMobile();
  const mineProfileBlocked = useSelector(selectAmIBlocked);

  const togglePhonePopover = (event) => {
    if (props.interlucator?.telephone) {
      setShowPhonePopover((prevState) => !prevState);
      setPhonePopoverAnchorEl((prevState) => {
        if (prevState) return null;
        return event.target;
      });
    }
  };
  const routeToUser = () => {
    if (!props?.interlucator?._blocked)
      history.push(
        replaceInRoute(PROFILE_PAGE, {
          profileId: props?.interlucator?.userId,
        })
      );
  };
  return (
    <>
      <DirectChatContentHeaderContainer>
        <DirectChatContentHeaderFlexContainer>
          <ProfileImage
            onClick={routeToUser}
            src={getImageUrl(
              props?.interlucator?.image,
              variants.chatHeader,
              isMobile
            )}
          />
          <ProfileDetails>
            <ProfileName onClick={routeToUser}>
              {props?.interlucator?.name}
            </ProfileName>
            <ProfileLocation>
              <ProfileLocationIcon />
              <ProfileLocationText>
                {props?.interlucator?.location}
              </ProfileLocationText>
            </ProfileLocation>
          </ProfileDetails>
        </DirectChatContentHeaderFlexContainer>
        <DirectChatContentHeaderFlexContainer>
          <PhoneIconContainer
            disabled={
              mineProfileBlocked ||
              props?.interlucator?._blocked ||
              !props.interlucator?.telephone
            }
            onClick={togglePhonePopover}
          >
            <PhoneIcon />
          </PhoneIconContainer>
        </DirectChatContentHeaderFlexContainer>
        <PopoverComponent
          anchorEl={phonePopoverAnchorEl}
          open={showPhonePopover}
          anchorRight
          onClose={togglePhonePopover}
          content={<PhonePopover phoneNumber={props.interlucator?.telephone} />}
        />
      </DirectChatContentHeaderContainer>
      {(props.exchangeState === exchangeStatus.I_OFFERED ||
        props.exchangeState === exchangeStatus.ACCEPTED ||
        props.exchangeState === exchangeStatus.REVIEWED) && (
        <DirectChatHeaderStatusContainer>
          <DirectChatHeaderStatusText>
            {props.exchangeState === exchangeStatus.I_OFFERED
              ? t("messages.requestSentLong")
              : t("messages.requestSuccessfulLong")}
          </DirectChatHeaderStatusText>
        </DirectChatHeaderStatusContainer>
      )}
    </>
  );
};

DirectChatContentHeader.propTypes = {
  children: PropTypes.node,
  interlucator: PropTypes.any,
  exchangeState: PropTypes.bool,
};

export default DirectChatContentHeader;
