import React from "react";
import PropTypes from "prop-types";
import {
  ButtonsContainer,
  DeleteOfferContainer,
  DeleteQuestion,
  OfferInfo,
  OfferImageContainer,
  OfferImage,
  OfferDescription,
  OfferDescriptionTitle,
  OfferDescriptionCategory,
  CancelButton,
  RemoveIconContainer,
  RemoveIcon,
  SaveButton,
  CategoryIcon,
} from "./DeleteOffer.styled";
import selectedTheme from "../../../../themes";
import { ReactComponent as Category } from "../../../../assets/images/svg/category.svg";
import BackdropComponent from "../../../MUI/BackdropComponent";
import { useDispatch } from "react-redux";
import {
  fetchProfileOffers,
  removeOffer,
} from "../../../../store/actions/offers/offersActions";
import { useTranslation, Trans } from "react-i18next";
import { useHistory } from "react-router-dom";

const DeleteOffer = (props) => {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const history = useHistory();
  const userId = props.offer.userId;
  const offerId = props.offer._id;
  const closeDeleteModalHandler = () => {
    props.closeModalHandler();
  };

  const handleApiResponseSuccess = () => {
    dispatch(fetchProfileOffers(userId));
  };

  console.log(history);

  const removeOfferHandler = () => {
    dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
    props.closeModalHandler();
    if (history.location.pathname.includes("proizvodi")) {
      history.goBack();
    }
  };

  return (
    <>
      <BackdropComponent
        isLoading
        position="fixed"
        handleClose={closeDeleteModalHandler}
      />
      <DeleteOfferContainer>
        <OfferInfo>
          <OfferImageContainer>
            <OfferImage src={props.offer.images[0]} />
          </OfferImageContainer>
          <OfferDescription>
            <OfferDescriptionTitle>{props.offer.name}</OfferDescriptionTitle>
            <OfferDescriptionCategory>
              <CategoryIcon color="#c4c4c4" component="span" size="16px">
                <Category />
              </CategoryIcon>
              {props.offer.category.name}
            </OfferDescriptionCategory>
          </OfferDescription>
          <RemoveIconContainer>
            <RemoveIcon />
          </RemoveIconContainer>
        </OfferInfo>
        <DeleteQuestion>
          <Trans i18nKey="deleteOffer.areYouSure" />
        </DeleteQuestion>
        <ButtonsContainer>
          <CancelButton
            variant="contained"
            height="48px"
            width="180px"
            fullWidth
            buttoncolor={selectedTheme.primaryPurple}
            textcolor="white"
            onClick={closeDeleteModalHandler}
          >
            {t("deleteOffer.cancel")}
          </CancelButton>
          <SaveButton
            type="submit"
            variant="outlined"
            height="48px"
            width="180px"
            fullWidth
            buttoncolor={selectedTheme.primaryPurple}
            textcolor={selectedTheme.primaryPurple}
            onClick={removeOfferHandler}
          >
            {t("deleteOffer.delete")}
          </SaveButton>
        </ButtonsContainer>
      </DeleteOfferContainer>
    </>
  );
};

DeleteOffer.propTypes = {
  offer: PropTypes.node,
  closeModalHandler: PropTypes.func,
};

export default DeleteOffer;
