import { Button } from "@/components/ui/button";
import {
    pdf,
    Page,
    Text,
    View,
    Document,
    StyleSheet,
    Image,
} from "@react-pdf/renderer";
import JsBarcode from "jsbarcode";

export const BarcodePDFExport = ({
    barcodeValue,
    data,
}: {
    barcodeValue: any;
    data: any;
}) => {
    const generatePDF = () => {
        //const barcodeValue = data; // Barcode value
        const canvas = document.createElement("canvas");

        // Generate barcode on the canvas
        JsBarcode(canvas, barcodeValue, {
            format: "CODE128",
            displayValue: false,
        });

        // Convert canvas to base64 image data
        const barcodeImage = canvas.toDataURL("image/png");

        // Define the document styles using @react-pdf/renderer
        const styles = StyleSheet.create({
            page: {
                padding: 30,
            },
            centerContent: {
                display: "flex",
                justifyContent: "center", // Center horizontally
                alignItems: "center", // Center vertically
                flexDirection: "column", // Stack items (barcode and description) vertically
                height: "75%", // Ensure the container takes full page height
                textAlign: "center",
            },
            section: {
                marginBottom: 10,
                textAlign: "center",
            },
            barcode: {
                width: 800, // Width of the barcode
                height: 200, // Height of the barcode
                marginBottom: 10,
            },
            description: {
                fontSize: 28,
                fontWeight: "bold",
                marginTop: 10,
                marginBottom: 20, // Ensure there's space below the text
            },
        });

        // Create the document
        const MyDocument = (
            <Document>
                <Page style={styles.page} orientation="landscape" size="A4">
                    <View style={styles.centerContent}>
                        <View style={styles.section}>
                            <Image src={barcodeImage} style={styles.barcode} />
                        </View>

                        <View style={styles.section}>
                            <Text style={styles.description}>
                                Lane: {data.laneDescription}
                            </Text>
                        </View>
                    </View>
                </Page>
            </Document>
        );

        // Generate the PDF and trigger download
        pdf(MyDocument)
            .toBlob()
            .then((blob) => {
                const link = document.createElement("a");
                link.href = URL.createObjectURL(blob);
                link.download = `${data.warehouseDescription}-${data.laneDescription}.pdf`;
                link.click();
            });
    };

    return (
        <div>
            <Button onClick={() => generatePDF()} color="primary">
                Export
            </Button>
        </div>
    );
};
