trampa-frontend/src/components/Cards/CreateOfferCard/CreateOffer.js

import React, { useState } from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";
import { HOME_PAGE } from "../../../constants/pages";
import {
  CreateOfferContainer,
  CreateOfferTitle,
  ModalCreateOfferContainer,
  ModalHeader,
  BackIcon,
  // CloseIcon,
} from "./CreateOffer.styled";
import StepProgress from "../../StepProgress/StepProgress";
import FirstPartCreateOffer from "./FirstPart/FirstPartCreateOffer";
import SecondPartCreateOffer from "./SecondPart/SecondPartCreateOffer";
import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer";
import {
  addOffer,
  fetchProfileOffers,
} from "../../../store/actions/offers/offersActions";
import { editOneOffer } from "../../../store/actions/offers/offersActions";
import { ReactComponent as ArrowBack } from "../../../assets/images/svg/arrow-back.svg";
// import { ReactComponent as CloseButton } from "../../../assets/images/svg/close-modal.svg";
import { useTranslation } from "react-i18next";
import BackdropComponent from "../../MUI/BackdropComponent";
import CloseButton from "./CloseButton/CloseButton";

const CreateOffer = ({ history, closeCreateOfferModal, editOffer, offer }) => {
  const dispatch = useDispatch();
  const [informations, setInformations] = useState({});
  const [currentStep, setCurrentStep] = useState(1);
  const categories = useSelector((state) => state.categories.categories);
  const historyRouter = useHistory();
  const { t } = useTranslation();

  const handleApiResponseSuccess = () => {
    if (editOffer === undefined) {
      const userId = historyRouter.location.pathname.slice(
        9,
        historyRouter.location.pathname.length
      );
      dispatch(fetchProfileOffers(userId));
      historyRouter.push({
        pathname: HOME_PAGE,
        state: {
          from: history.location.pathname,
        },
      });
    } else {
      const userId = offer.userId;
      dispatch(fetchProfileOffers(userId));
    }
  };

  const handleNext = (values) => {
    setInformations({ ...informations, ...values });
    setCurrentStep((prevState) => prevState + 1);
  };

  const newImgs =
    informations.images &&
    informations.images
      .filter((img) => img !== undefined)
      .map((img) =>
        img
          .replace("data:image/jpg;base64,", "")
          .replace("data:image/jpeg;base64,", "")
          .replace("data:image/png;base64,", "")
      );

  let subcategories = [];
  for (const element of categories) {
    if (element.name === informations.category) {
      subcategories = element.subcategories.map((item) => item.name);
    }
  }

  const offerData = {
    name: informations.nameOfProduct,
    description: informations.description,
    location: {
      city: informations.location,
    },
    condition: informations.condition,
    category: {
      name: informations.category,
      subcategories: subcategories,
    },
    subcategory: informations.subcategory,
    images: newImgs,
  };

  const submitOffer = (values) => {
    dispatch(addOffer({ values, handleApiResponseSuccess }));
  };

  const submitEditOffer = (id, values) => {
    dispatch(editOneOffer(id, values));
  };

  const handleSubmitOffer = () => {
    if (editOffer === undefined) {
      submitOffer({ offerData, handleApiResponseSuccess });
    } else {
      const offerId = offer._id;
      submitEditOffer({ offerId, offerData, handleApiResponseSuccess });
    }
    closeCreateOfferModal(false);
  };

  const backButtonHandler = () => {
    setCurrentStep((prevState) => prevState - 1);
  };

  // const closeModalHandler = () => {
  //   closeCreateOfferModal(false);
  // };

  const goStepBack = (stepNumber) => {
    setCurrentStep(stepNumber);
    const {
      category,
      condition,
      description,
      // images,
      location,
      nameOfProduct,
      subcategory,
    } = informations;
    if (stepNumber === 1) {
      setInformations({});
    }
    if (stepNumber === 2) {
      setInformations({
        category,
        condition,
        description,
        location,
        nameOfProduct,
        subcategory,
      });
    }
  };

  return (
    <>
      <BackdropComponent
        isLoading
        handleClose={closeCreateOfferModal}
        position="fixed"
      />
      <ModalCreateOfferContainer currentStep={currentStep}>
        <CreateOfferContainer currentStep={currentStep}>
          <ModalHeader>
            <BackIcon onClick={backButtonHandler}>
              {currentStep !== 1 ? <ArrowBack /> : ""}
            </BackIcon>
            <CreateOfferTitle component="h1" variant="h5">
              {currentStep === 3
                ? `${t("offer.review")}`
                : `${
                    editOffer !== undefined
                      ? `${t("offer.changeOffer")}`
                      : `${t("offer.newOffer")}`
                  }`}
            </CreateOfferTitle>
            <CloseButton closeCreateOfferModal={closeCreateOfferModal} />
            {/* <CloseIcon onClick={closeModalHandler}>
              <CloseButton />
            </CloseIcon> */}
          </ModalHeader>

          <StepProgress
            current={currentStep}
            numberOfSteps={3}
            functions={[() => goStepBack(1), () => goStepBack(2)]}
          />
          {currentStep === 1 && (
            <FirstPartCreateOffer handleNext={handleNext} offer={offer} />
          )}
          {currentStep === 2 && (
            <SecondPartCreateOffer handleNext={handleNext} offer={offer} />
          )}
          {currentStep === 3 && (
            <ThirdPartCreateOffer
              handleSubmitOffer={handleSubmitOffer}
              informations={informations}
            />
          )}
        </CreateOfferContainer>
      </ModalCreateOfferContainer>
    </>
  );
};

CreateOffer.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
  closeCreateOfferModal: PropTypes.func,
  editOffer: PropTypes.bool,
  offer: PropTypes.object,
};
export default CreateOffer;