RentABikeReact/src/components/SelectedBike.js

import {Badge} from "primereact/badge";
import Moment from "react-moment";
import {Button} from "primereact/button";
import {SPRING_SERVER} from "../config";
import {useEffect, useState} from "react";
import authorizedFetch from "../Utils";
import {useTranslation} from "react-i18next";

export default function (props) {
    const [pdfGeneratorVisible, setPdfGeneratorVisible] = useState(false);
    const [payVisible, setPayVisible] = useState(false);
    const { t } = useTranslation(); // Initialize the hook

    useEffect(() => {
        console.log("rerender")
        setPayVisible(false)
        setPdfGeneratorVisible(false)
    }, [props.selectedBike.id]);
    function rentMethod() {
        const url = SPRING_SERVER + '/api/rentABike/' + props.user + "/" + props.selectedBike.id;
        fetch(url, {
            method: "POST", headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                "Authorization": "Bearer " + localStorage.getItem("access_token"),
            }, body: JSON.stringify({
                "rentedFrom": props.selectedDate[0],
                "rentedTo": props.selectedDate[1],
                "price": props.selectedBike.price
            })
        }).then(() => {
            props.callback()
        }).then(() => {
            setPayVisible(true)
        })
    }

    function generateInvoice() {
        const pdfEndpoint = SPRING_SERVER + "/api/download-pdf/" + props.selectedBike.id; // Replace with your PDF endpoint URL

        fetch(pdfEndpoint, {
            method: 'GET', headers: {
                "Authorization": "Bearer " + localStorage.getItem("access_token"),
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.blob();
            })
            .then(blob => {
                // Create a temporary URL for the blob
                const url = URL.createObjectURL(blob);

                // Create an anchor element to trigger the download
                const a = document.createElement('a');
                a.href = url;
                a.download = 'document.pdf'; // Change the filename if needed

                // Programmatically trigger the download
                document.body.appendChild(a);
                a.click();

                // Clean up: remove the anchor and revoke the URL
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }).then(() => {
            setPdfGeneratorVisible(false)
        })
            .catch(error => {
                console.error('Fetch error:', error);
            });

    }

    function payForABike() {
        authorizedFetch(SPRING_SERVER + "/api/payForABike/" + props.selectedBike.id)
            .then((boolean) => {
                if (boolean) setPdfGeneratorVisible(true)
                else {
                    setPayVisible(false)
                    //show notification that it's too late for payment
                }
            })
    }

    return (


    <div className="p-2 surface-200 shadow-8 w-12 flex flex-column" style={{border: "1px solid #cfcfcf"}}>
        <div className="flex flex-row"><Badge value={props.selectedBike.id} severity="info"/></div>
        <div>{t("days")}: {Math.ceil((props.selectedDate[1] - props.selectedDate[0]) / (1000 * 3600 * 24))}</div>
        <div>{t("price")}: {Math.ceil((props.selectedDate[1] - props.selectedDate[0]) / (1000 * 3600 * 24)) * props.selectedBike.price}$</div>
        <div className={"flex flex-row"}><Button onClick={() => {
            rentMethod()
        }} className="mt-2 flex-grow-1">{t('rent')}</Button>{payVisible ? <Button severity={"danger"} onClick={() => {
            payForABike()
        }} className="mt-2 ml-2">{t('pay')}</Button> : <div></div>}</div>
        {pdfGeneratorVisible ? <Button severity={"warning"} onClick={() => {
            generateInvoice()
        }} className="mt-2">{t('invoice')}</Button> : <div></div>}

    </div>


    )
}