import React from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { ABOUT_PAGE } from "../../../../constants/pages";
import { DollarIcon, GrayButton } from "../MyProfile.styled";
import { PopoverButton } from "../../HeaderPopover/HeaderPopover.styled";
import { useHistory } from "react-router-dom";
import scrollConstants from "../../../../constants/scrollConstants";
import { routeMatches } from "../../../../util/helpers/routeHelpers";

const PricesButton = (props) => {
  const { t } = useTranslation();
  const history = useHistory();
  const seePrices = () => {
    if (!routeMatches(ABOUT_PAGE)) {
      history.push({
        pathname: ABOUT_PAGE,
        state: {
          navigation: scrollConstants.about.pricesPage,
          clicked: true,
        },
      });
    } else {
      history.replace({
        state: {
          clicked: true,
          navigation: scrollConstants.about.pricesPage,
        },
      });
    }
    props.closePopover();
  };
  return (
    <GrayButton>
      <PopoverButton
        sx={{
          mr: 2,
          mb: 2,
        }}
        variant="text"
        endIcon={<DollarIcon />}
        onClick={seePrices}
      >
        {t("header.prices")}
      </PopoverButton>
    </GrayButton>
  );
};

PricesButton.propTypes = {
  children: PropTypes.node,
  closePopover: PropTypes.func,
};

export default PricesButton;