import React from "react";
import PropTypes from "prop-types";
import { PreviewCard } from "./ThirdPartCreateOffer.styled";
import { NextButton } from "../FirstPart/FirstPartCreateOffer.styled";
import selectedTheme from "../../../../themes";
import { CreateOfferFormContainer } from "../CreateOffer.styled";
import { useTranslation } from "react-i18next";

const ThirdPartCreateOffer = (props) => {
  const { t } = useTranslation();
  const offer = {
    offer: {
      category: {
        name: props.informations.category,
      },
      subcategory: props.informations.subcategory,
      condition: props.informations.condition,
      _created: new Date().toString(),
      images: props.informations.images.filter((item) => item !== undefined),
      name: props.informations.nameOfProduct,
      description: props.informations.description,
    },
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    props.handleSubmitOffer();
  };

  return (
    <>
      <CreateOfferFormContainer
        currentStep={3}
        component="form"
        onSubmit={handleSubmit}
      >
        <PreviewCard
          offer={offer}
          showBarterButton={false}
          showPublishButton={false}
          showExchangeButton={false}
          hideViews
        />
      </CreateOfferFormContainer>
      <NextButton
        type="submit"
        variant="contained"
        height="48px"
        buttoncolor={selectedTheme.primaryPurple}
        textcolor="white"
        fullWidth
        onClick={handleSubmit}
      >
        {t("offer.publish")}
      </NextButton>
    </>
  );
};

ThirdPartCreateOffer.propTypes = {
  children: PropTypes.any,
  handleSubmitOffer: PropTypes.func,
  informations: PropTypes.object,
};

export default ThirdPartCreateOffer;
