import React from "react";
import { ReactComponent as LogoBroken } from "../../../assets/images/svg/logo-broken.svg";
import {
  Button,
  OffersNotFoundContainer,
  OffersNotFoundDescription,
  OffersNotFoundHeading,
} from "./OffersNotFound.styled";
import selectedTheme from "../../../themes";
import { Trans, useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { HOME_PAGE } from "../../../constants/pages";
import { useDispatch } from "react-redux";
import { fetchOffers } from "../../../store/actions/offers/offersActions";

const OffersNotFound = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const { t } = useTranslation();

  const showAllOffersHandler = () => {
    dispatch(fetchOffers({ queryString: "" }));
    history.replace({
      pathname: HOME_PAGE,
      state: {
        from: history.location.pathname,
      },
    });
  };

  return (
    <OffersNotFoundContainer>
      <LogoBroken />
      <OffersNotFoundHeading>
        {t("offersNotFound.notFound")}
      </OffersNotFoundHeading>
      <OffersNotFoundDescription>
        <Trans i18nKey="offersNotFound.errorMessage" />
      </OffersNotFoundDescription>
      <Button
        variant="contained"
        width="190px"
        height="49px"
        buttoncolor={selectedTheme.primaryYellow}
        textcolor="black"
        onClick={showAllOffersHandler}
      >
        {t("offersNotFound.showAllOffers")}
      </Button>
    </OffersNotFoundContainer>
  );
};

export default OffersNotFound;
